Using the Chroma Pro Stack
Simple example showing menu size and color change on sticky fix.
Transition triggered when the sticky Chroma stack fixes to the top of the screen
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 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.
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
We need a marker stack 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.
Chroma Pro stack settings.
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.
Differences when using Chroma Pro.
We need a marker stack 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.
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
Notes.
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.