AltTextUsing the Chroma Stack

Sticky fix when in a contained width column.

For the purposes of this demo, the page is just inside a 90% wide stacks column.

Using the Full Width Fix setting, Chroma can fix to full width. Here is is set to full width below 640px

Comments

Contained with fixing is very useful for pillar type page layouts.

On smaller screens however, this wastes space and looks incoherent. Chroma therefore gives you the option to fix at full browser width below a breakpoint of your choice.

Setup Notes

Chroma style trigger is set to: When Sticky Fixes

The Position is set to sticky .

The option for No Padding Change on Mobile is enabled.
It is recommended that you don't use size changes for mobile menus, it can use up too much screen real estate.

The Full Width Fix setting is set to Below Breakpoint so that Chroma fixes to full widths on smaller screens.

THIS IS NOT A REAL MENU. It is just to show Chroma in operation.

To use this Chroma setup simply replace the 3-column fake menu with your real menu.

Other Stacks used.

Just for this example (not required)

  • Sections Pro
  • Header Pro
  • Paragraph Pro
  • ButtonPlus 2

Unlike other "Blank" themes, Joe's is totally blank. There is no hidden framework behind the scenes.

There are therefore no dependencies in this project and you can copy the Chroma set ups in to any theme.

Note: Examples using full width fixing requires a theme that allows full width content