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.
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.
The “Header with logo image” CSS code did not work for me, too. The logo image transforms properly, but all the other CSS has no effect.
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.
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.
I’d like to do this using SoulNav as the block type. Suggestions?
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?
Might be with some CSS magic but it might be hacky and wonky on different devices.
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
I have exactly the same issues as JAMIE and EDUARDOCARREIRO. Are solutions available?
I am also having the same problem as JAMIE and EDUARDOCARRIERO and HOOPERMAN13. The wrapper doesn’t shrink with the logo.