How to change sticky header not to stick in Azuma Pro

[David Burns]

How do I change the sticky header not to stick in Azuma Pro? I can’t find any setting so I’m looking for the CSS.

[Yazmin]

Please add the following to Additional CSS

#masthead.scrolled {
    position: relative;
    transition: none !important;
}

That will stop the header from being fixed in position when scrolling down the page.

[David Burns]

That worked, but now #content has element 165px padding-top added when you begin a page scroll.

Thank you!

[Andy]

Please also add this CSS

#content {
    padding-top: 0 !important;
}

[David Burns]

Unfortunately that didn’t work. When the page loads or is refreshed it looks normal. It’s when you begin scrolling that the content top padding jumps to 165px. Maybe it’s a transition or other animation causing this? I have revised the header and page width but everything is fine other than this problem. Since the header now scrolls with the page it would be fine without any animation. Thanks

[Andy]

That CSS should work. Would you be able to let me know your page URL and I’ll take look.

The extra padding is javascript calculated as the height of your header to make the sticky header scrolling more seamless on the transparent header page template.

[Andy]

I think a theme option to turn off the sticky header would be a good idea for the next theme update. We’ll get that added.

[David Burns]

http://northci1.wwwaz1-ss36.a2hosted.com/staff/

I agree an option would be good.

[Andy]

Thanks.

I tried the CSS I suggested and it does work.

I can also see you’re targeting .site-content (this is same element as #content) in your child theme with all round padding of 2em, so you may want to use this instead:

.site-content {
    padding-top: 2em !important;
}

[David Burns]

That’s working pretty well. There is still a little content creep (up maybe 10px now) when scrolling but it’s acceptable. Maybe it’s still the javascript animation or maybe something else I have in CSS. Anyway, I’m happy with it for now. Thanks!

[Author]

Posts