Documentation › Reduce the size of your sticky wrapper contents as you scroll

Reduce the size of your sticky wrapper contents as you scroll

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

Caveats

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.

You may be wondering why the font for the site title is set to 150%.  You might be expecting the font-size to then be larger on scroll but the percentage is the percentage of the base font size i.e. on the body (or HTML element).

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress