Ovelapping Contentwith Sections Pro

Sections allows us to overlap content in two ways.

The first way is using the Sections Fix stack. You can see how to use Sections Fix here

This page the uses the powerful Custom Margins feature in Sections Pro which allows us to create responsive overlaps on all sorts of elements.

The page content is overlapped over the bottom of the header image, smoothing the transition between the header and the page content by simply applying a negative margin in the Sections Pro settings.

Sections has a custom Margins control that allows us to responsibly control the position of the top each stack on your page.

In this example we a making a Pillar type arrangement using a Grummage 1column stack to contain the content to the site width.

We have used the Grummage column background color to apply the content background color.

In order to overlap the Section on the header image we simply need to apply a negative margin. The trick is to make this margin proportional so that it looks good as the screen width is changed.

Remember, with Sections custom responsive margins that you can define both a mobile margin and also separate mobile units. Test your design and find out which works best with the size of your header and position of your main content.