You may be taking advantage of Headway’s built-in sticky wrapper feature and realize that you’d like your logo and/or your menu item to reduce in size once the wrapper becomes sticky as you scroll.
With just a little bit of CSS, you can do this easily. This tutorial will go over two potential options, a header with a site title in text and a header with a logo. Both include a navigation block.
Simply copy and paste one of the snippets into the Live CSS Editor.
Header with logo image
This will set a transition of reducing the image size in the header block and the font-size in the navigation block after the wrapper becomes sticky
Header with Site title as text
This will set a transition of reducing font-size in the header & navigation block after the wrapper becomes sticky
Both of the above will only resize the menu items if you haven’t customized the font-size separately for the menu item element. Meaning, the menu item element does not inherit from the Global Styling.
If you have specifically customized the menu item font size then you need to add to this rule
.wrapper.is_stuck .block .nav-horizontal ul.menu > li > a. After
transition: all 500ms ease; in that rule add:
font-size: 85% (changing the percentage to your needs) or
font-size: 14px (changing the pixels to your needs).
If you’ve customized the menu item element for that instance only (and not globally/regular element), then you’ll need to change
.block in this rule
.wrapper.is_stuck .block .nav-horizontal ul.menu > li > a to your block ID.