Learn Sections Pro

Sections Fix StackPosition stacks within and around a Section

Sections Fix allows you to add fixed responsive elements to any Sections.

There are a 101 uses for Sections Fix but in most cases it it used to position a button at the bottom of an equalised height column to to add an overflowing logo or other image that spans Sections.

Fixed content is responsive and there are lots of options to change the position or hide altogether for smaller screens.

Sections Fix is smart. You can opt to auto space the Sections content to prevent it flowing underneath your fixed items. This is a lot different than just using other fixed position stacks.

  Sections Fix is smart. You can opt to auto space the Sections content to prevent it flowing underneath your fixed items. This is a lot different than just using other fixed position stacks.

Example 1 - Fixing Buttons to the bottom of columns

Here we have 3 equalised height columns containing Sections with a background gradient.

Each Section has its Equalize setting enabled.

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore. Gentrify Aves Ayelsbury craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard mallards fap

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore.

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore. Gentrify Aves Ayelsbury craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard mallards fap Terry Richardson XOXO. Sartorial vinyl passion, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Eider trust fund, grummage

Now, to fix a button to the bottom of each column, we simply drop in a Sections Fix stack to the Section (with a button in it in this case) and with everything set at default we get the following.

Notice how the long paragraph in the third column has automatically had padding applied beneath it to make room for the button. Despite Sections Fix floating the button at the bottom of the Section, the content is never covered as would be the case with conventional fixed positioning stacks.

  Now look what happens when you make your browser narrow. As the columns stack, Foundation removes the equalizer but Sections Fix responds and correctly pads each of the column contents so that the buttons never overlay the text.

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore. Gentrify Aves Ayelsbury craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard mallards fap

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore.

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore. Gentrify Aves Ayelsbury craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard mallards fap Terry Richardson XOXO. Sartorial vinyl passion, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Eider trust fund, grummage

Example 2 - Fixing Images

Sections Fix allows you to specify the position of its content relative to the sides of the Section that it is within - these are called offsets.

Positive offsets will be inside the Section so a right offset of 20px will be that distance in, from the right hand edge of the section.

Negative offsets allow the positioning of the Fix content outside of the Section.

  When using negative offsets to fix content (partially) outside a Section you will usually want to turn off the Content Padding setting in the Sections Fix stack, or set it to manual for finer control.

Stacks Image 1251451

My image gets cut off

In the blue Section we have a 64px high image of the Sections Icon with a bottom offset of -32px. This means that 1/2 of the image is outside the Section

You can see that there is a problem with the image getting cut off. This is because stacks prevents overflow of content between stacks.

There are two easy solutions.

There are two easy solutions.

OPTION 1. Place the fixed image in the second (green) Section. The Sections stack knows when it contains a fixed element and automatically enables overflow. Because the green Section is after the blue Section in the page order (DOM) then everything will work out of the box.

OPTION 2: Simply set the Priority setting in the blue Section to a higher value than the one in the blue Section. This will ensure that the content of the blue section overlays that of the green Section regardless of the order on the page.

OPTION 1Sections Fix in green SectionUsing Top offset and no change in Priority

Stacks Image 1251570

OPTION 2Blue Section - Priority: 2Green Section - Priority: 1 (default)

Stacks Image 1251623

Sections Fix - Responsive Controls

Fixed overlapping content like the above example may often need adjusting for different screen sizes.

For example, a responsive image may change size for smaller screens and so you will need to use the Sections Fix settings to adjust the offset accordingly to keep it perfectly positioned.

In some cases, you will want to hide the Fix content completely at certain browser sizes to maintain your layout.

DO NOT USE VISIBILITY STACKS TO DO THIS - THEY WILL NOT WORK

Simply use the responsive show and hide settings in the Sections Fix stack.

Get Creative

One of the main criticisms of banded websites is that they can get just too linear and boring.

Many of the finest examples counteract this by allowing certain content or images to "bridge" the colored bands (Sections).

Sections allows you to do this easily and controllably using the Sections Fix stack as well as using the overlaying features described in the Banded Sections - 1 page of this demo project.

Sections Pro

Learn Sections

See what you can do with Sections Pro using these demo projects as a starting point.

A Title

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore. Gentrify Aves Ayelsbury craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard mallards fap Terry Richardson XOXO. Sartorial vinyl passion, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Eider trust fund, grummage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, paddles ennui narwhal Tumblr platyrhynchos Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird up it.

This is just the start, now get creative......