Using the Chroma Pro Stack

Demonstrating the use of multiple style changes with markers. Scroll down the page to see the different menu styles.

Comments

This setup is slightly more complicated that 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.

Setup Notes

Chroma Pro uses markers to trigger the style change.

The name of the marker corresponds to the fixed style child stack whose styles we wish to apply.

The marker is placed directly above the Chroma Pro stack so that it reaches the top of the page at the same time as our menu does.

IMPORTANT:

We need to turn off the InBuilt marker in ChromaPro to stop the default styles being applied when it reaches the top of the page - i.e. an instant after our style1 marker does.

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

Chroma PRO Position is set to sticky.

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.

Keep Scrolling