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.
Dropdowns
Because the Foundry Nav Bar has its own dedicated drop down color selectors, the Chroma DropDown styles are not used and have no effect.
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.
Nav Bar allows us to define styles for the drop down menus separately from the bar. On most occasions this means that the Initial Styles can just be set in the Nav Bar stack with no need to use the Chroma over rides.
Chroma can simply be used to apply background and text styles to the drop down items in the triggered state so that they match the revised styles of the bar.
In this example we are also re-coloring the dropdowns subtly between the two style states.
Just for this example (not required)
This page uses Foundry to demonstrate the use of Chroma with the Nav Bar stack.
You can use Chroma with many menu stacks and any other content that you like.
Simply copy the Chroma stack without the Nav Bar menu to use it in other situations.