Resize Logo and change padding.
Triggered by a marker.
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 Logo Max Size controls are enabled. In the case of Top Bar, the sizes refer to a percentage max height (see the tooltips on the controls for more information.)
We animate the maximum height of the site logo from 100% to 60% as the marker triggers the style change.
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.
Just for this example (not required)
This page uses Foundation to demonstrate the use of Chroma with the TopBar stack.
You can use Chroma with many menu stacks and any other content that you like.
Simply copy the Chroma stack without the TopBar menu to use it in other situations.
The Chroma demo site begins with the phrase "Every detail matters". Getting the styling of the dropdowns correct for all menu configurations is a case in point and separates the polished from the shoddy finished site.
Lets give drop downs a little thought....
Chroma makes the TopBar background transparent so that the Chroma backgrounds show through.
This means that in this example, where Chroma starts off transparent, then the dropdowns will be transparent as well.
This is not a problem on desktop with our header but on mobile it can look ugly if the dropdown appears over the header text.
We therefore need to apply the same color as our Chroma bar background to the dropdowns for the Initial State.
Once Chroma has its new scrolled styles then we are faced with the opposite situation.
On mobile, the dropdown will be contained within the Chroma stack (it will grow to contain it). We therefore don't need a color on the dropdown if we want it to be the same opacity background as the bar so we set its opacity to 0.
On desktop however, the dropdowns will drop out of the Chroma bar. We therefore apply our 92% opacity blue color to the dropdowns for desktop only in the Triggered style settings.