Tagged: sticky
Hey,
I managed to make the mobile header sticky on my website by adding this CSS:
.html_header_top.html_header_sticky #header {
position: fixed !important;
}
@media only screen and (max-width: 767px) {
.responsive #main {
padding-top: 0px !important;
}
}
However, it is now hiding part of the content, mainly the headers. I tried to fix this issue according to this post:
https://kriesi.at/support/topic/mobile-sticky-header-hiding-content/
Result: Content is not hidden anymore, but the header stops sticking and simply disappears again when scrolling on the mobile.
Any ideas?
Best regards,
Meike
Hey AlpseeDesign,
Add this to quick css:
@media only screen and (max-width: 767px) {
#main {
margin-top: 80px !important;
}}
Best regards,
Jordan Shannon
Hey Jordan,
thanks, that caused a definite improvement of the header behaviour already.
Not quite there yet though – once one starts scrolling down on the mobile and the sticky header shrinks, it also moves down a little bit so the content shows above the header when scrolling down.
Any hint on how to fix this so the header really sticks to the very top of the page?
Best regards,
Meike
Hi AlpseeDesign,
Could you please attach some screenshots of the issue?
The header behaves well on my end.
Best regards,
Victoria
Hi Victoria,
thanks for checking and apologies – actually it’s true, it stopped behaving strangely. Might have been a cache issue, I suppose.
Great theme, great support, thanks a lot for solving this! :)
Best regards,
Meike
Hi,
I’m glad this was resolved. If you need additional help, please let s know here in the forums.
Best regards,
Jordan Shannon