AltTextUsing the Chroma Stack

Adds the Slide Up feature to Sticky fix when in a contained width column.

Scroll the page up and down.

You will see the menu slides up after 300px of scrolling down and re-appears when you scroll back up 100px.

Comments

Slide Up is a great way to focus on page content and not the navigation. It is the way the navigation elements in iOS Safari work.

You can either control the slide up feature using scroll detection (like this page) or you can use markers to slide up and down Chroma at will.

This page shows it working with a sticky Chroma. As you can see, the Slide Up function is disabled until the menu sticks.

Setup Notes

The Slide Up function is enabled in Chroma.

When the page is scrolled downwards the menu will slide up out of the way.

When the page is scrolled back a little, the menu will re-appear.

If you need slide up and down controlled by markers then use the Chroma Pro stack.

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

The rest of the setup is the same as the Contained Width Sticky example:

Chroma style trigger is set to: When Sticky Fixes

The Position is set to sticky .

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 Full Width Fix setting is set to Below Breakpoint so that Chroma fixes to full widths on smaller screens.

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