Using the Chroma Stack
Simple example showing menu size and color change on sticky fix with an offset
to place the menu below the fixed Chroma bar at the top of the page.
Comments
It is not the most common use case but if you need a sticky element to fix beneath another fixed element then Chroma has it covered.
There are options for desktop and mobile offsets with a configurable breakpoint.
Setup Notes
Top Chroma is set to Fixed.
2nd Chroma (with Menu)
Chroma style trigger is set to: When Sticky Fixes
The Position is set to sticky.
An offset is set equal to the height of the top Chroma.
A mobile offset is also specified to cope with the change in the height of the top chroma content on small screens.
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.
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