[Resolved] Different menu on mobile

[Rene Nekuda]

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!

[Elvin]

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.

[Rene Nekuda]

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

[David]

Hi there,

did you resolve the issue ? as i can only see the Mobile menu is sticking.

[Rene Nekuda]

NOPE, I would like to have sticky only this part (without logo): https://renenekuda.d.pr/kt4XzD

[David]

This is what i seen when scrolling down on your site on a mobile device:

[Rene Nekuda]

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

[David]

Aah ok… try adding this CSS to hide the mobile logo when sticky:

.sticky-enabled #mobile-header.is_stuck .site-logo {
    display: none;
}

[Rene Nekuda]

This is exactly what I want. You are amazing team, guys! Thank you very much!

[David]

Glad we could be of help!

[Author]

Posts