Comments

This layout can be made using Chroma or Chroma Pro (like all the basic examples)

The example on this page uses Chroma Pro.

Float over content

Setup Notes

Chroma PRO Position is set to fixed.

Float over content is enabled so that the picture is not padded down by the height of the bar

The setting for InBuilt Marker is none.

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 fixed (or when it sticks) style is defined in the style1 child stack. (You can rename this to whatever you want.

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.

Additional Info

This setup is slightly more complicated than using the Chroma (non Pro) stack.

If you just want to do a simple style change on fix then use the Chroma stack.

Chroma Pro allows a lot more control and the option to use more than one marker for other style changes further down the page.

Chroma Pro allows partial friendly inbuilt marker naming for use on site wide menus.

Other Stacks used.

Just for this example (not required)

Sections Pro
Header Pro
Paragraph Pro
ButtonPlus 2

Made with the Blank theme from Joe Workman

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