Archived topic
How to make sticky navigation NOT sticky for shorter mobile phones
3 replies · Started by Selene on February 28, 2023
Hello,
Is it possible to make the sticky navigation NOT sticky only for mobile phones under a certain height?
The sticky navigation is currently set up for both Desktop + Mobile, but we need it not to be sticky for older/shorter phones. I already have the media query in place for some other items, but not sure what class/id to target, and the related code.
@media (max-height: 575px) {
}
In a previous question, I asked about setting up a sticky top bar for only the blog on mobile, and I've been able to unstick that for shorter phones. Just need to make the main header/nav not stick here, either. (please see home vs blog links in the private info box)
Thanks in advance for your help!
Selene
Hi there,
Does this media query actually work?
@media (max-height: 575px) {
If so you can try this:
@media (max-height: 575px) {
#mobile-header.navigation-stick {
display: none !important;
}
}Hi Leo,
That works perfectly - thank you so much!
(I am new to the max-height media query - had to search for info on it today)
Thanks again!
Selene
No problem :)
max-height is new to me too!
