Archived topic
Different menu on mobile
9 replies · Started by Rene Nekuda on December 2, 2020
Hello, my site using your theme is live and I am happy :)
I have in mind one last thing, which I am trying to set up – different menu on mobile.
Design #1: My mobile menu now looks like this: https://renenekuda.d.pr/4LupFN (and I like it).
I have read and did these steps: https://docs.generatepress.com/article/using-a-different-menu-on-mobile/
It is working, but my menu looks after this implementation like this: https://renenekuda.d.pr/wCVdSO
My question is: How to achieve Design #1 with a different mobile menu (logo above menu line)?
Note: MENU line should be sticky.
Thank you for your help!
You can try adding this CSS:
@media (max-width: 768px){
.main-navigation.has-branding .inside-navigation.grid-container {
padding: 0 10%;
}
.site-logo {
max-width: 100%;
height: fit-content !important;
}
.site-logo.mobile-header-logo img {
height: auto !important;
width: 100%;
margin-left: auto;
margin-right: auto;
}
nav.#mobile-header .inside-navigation.grid-container {
width: 90%;
}
#mobile-header .menu-bar-items {
order: 3;
}
}As for the "Sticky" effect. I believe there's an option to make the mobile header sticky on Appearance > Customize > Layout > Header when you enable Mobile Header.
Elvin, thank you very much. It look exactly as I want. :)
BUT Sticky part – now is sticky whole heade (included big logo). Is it possible to have sticky only the MENU line?
Screenshot: https://renenekuda.d.pr/kt4XzD
Hi there,
did you resolve the issue ? as i can only see the Mobile menu is sticking.
NOPE, I would like to have sticky only this part (without logo): https://renenekuda.d.pr/kt4XzD
This is what i seen when scrolling down on your site on a mobile device:
Oh, it would be great, but I think it is a cached version – I have deleted also CloudFlare's cache. Please, can you try it again? I can't see anthing like this… :(
My version looks like this: https://renenekuda.d.pr/wLS2AC
Aah ok... try adding this CSS to hide the mobile logo when sticky:
.sticky-enabled #mobile-header.is_stuck .site-logo {
display: none;
}This is exactly what I want. You are amazing team, guys! Thank you very much!
Glad we could be of help!
