AltTextUsing the Chroma Stack

Simple example showing menu size and color change on scroll.

Transition triggered via a marker placed below the Chroma stack

Comments

A simple fixed position menu over a header with a transparent background until scrolled is is a pretty standard setup.

Add the final polish with a vertical size change along with the colour.

Setup Notes

Chroma style trigger is set to: Marker
Ensure that the name you enter matches the marker name you add to the page.

The Position is set to fixed and to overlay content.

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