-
Posts
-
I took over a Enfold page and “play” with a test home page.:
I use “header invisible and appears once user scrolls down.”
That works fine on PC, but not at all on Smartphone. There header and Burger menu is visible right away and scrolls out, (not sticky).
How can I have it behaving the same way on mobile, (with logo and burger-menu) as it does on PC?
Thanks for your help in advanced
Rhoody… any takers?
I also tried the CSS suggested on another thread about sticky mobile header, but that places the header right on top of the slider.Hi Rhoody,
The behavior is only for desktop, laptops and other larger screens but not on phones.
It is not actually recommended to have sticky headers on mobile devices since the space is too little.
Also, this behavior is not done via CSS but through javascript.Best regards,
NikkoNikko,
Thanks for your reply. but i care more what the client wants. Sticky header with logo and burger menu are totally common on phones and tablets. There are plenty of threads about that topic on this board. usually with suggestions going in this direction:.html_header_top.html_header_sticky #header {
position: fixed !important;
}
@media only screen and (max-width: 767px) {
.responsive #main {
padding-top: 0px !important;
}
}. … but that covers the slider or first element of the page. Any suggestions to solve that?
other option would be at least a sticky “burger menu”Hi Rhoody,
Can you try adding this CSS code in Enfold > General Styling > Quick CSS:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all #header { position: fixed !important; top: 0; } .responsive #top #main { padding-top: 80px !important; } }Also, the mobile sticky header is on queue for development, hopefully it will be included in the next theme update :)
Best regards,
Nikko
- You must be logged in to reply to this topic.