- This topic has 9 replies, 3 voices, and was last updated 5 years, 4 months ago by
.
-
Posts
-
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!
Customer Support
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
Customer Support
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!
- You must be logged in to reply to this topic.
