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.

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

Each Section has its Equalize setting enabled.

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.

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.

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.

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.

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.

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