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).

Spread the word!

12 Responses

  1. What is the best way to shrink the overall wrapper where the logo image and navigation reside on scroll. My logo is shrinking properly, but I want to nave section to shrink vertically as well.

    • Hi Jamie,

      Would need to see the site. You can send in a ticket in your members dashboard under the Support tab.

    • Hi Markus,

      If you have a font-size customized for your menu item element, the above CSS won’t work. You need an extra rule in there. I’m updating the post now.

  2. Hi Jamie

    The code works perfectly and I know my way around Headway and CSS to make the wrapper shrink vertically as well, but the following question.

    As soon as I scroll back to the top, I want to the logo to return to its original size again. I see that when I start scrolling, the “is_stuck” CSS class is added to the wrapper, but I want the “is_stuck” class to disable when I’m back at the top of the site again.

    • Hi Christo,
      That isn’t a feature of the script we are using – to remove the stuck class when you scroll back up but Clay came up with a fix for it and it will be in the next release, which we hope to get out ASAP.

  3. I want to have the sticky header smaller than its original size when scrolling. I would really like to have a CTA pop into the header so in some sense I want a new header to appear and stay sticky. Is this possible?

  4. Hi, I tried and work fine. The only problem is that the content below pass in front of the menu and logo.

    How can I change this, to pass behind the wrapper?

    Regards

  5. I am also having the same problem as JAMIE and EDUARDOCARRIERO and HOOPERMAN13. The wrapper doesn’t shrink with the logo.

Leave a reply

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