Mobile Menu

[thehardhatguy]

I made some changes on the desktop version of my site and it made my mobile version menu really large and also got rid of my logo. How do I fix this? Here’s the link.

[thehardhatguy]

I was able to fix it (the large margin of the mobile menu- fixed it by turning mobile menu off) but now the positioning of the items has all changed. I want my logo in the center. My search bar on the right and my menu on the left.

[Leo]

Hi there,

Try this CSS:

.main-navigation.has-branding .menu-toggle {
    order: 1;
}
.navigation-branding, .site-logo.mobile-header-logo {
    order: 2;
    margin-left: auto !important;
}

Then I would suggest removing the mobile menu label so the logo will be true center:
https://docs.generatepress.com/article/mobile-menu-label/

Make sure to clear your caching plugins after making the changes.

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[thehardhatguy]

Thank you! That looks much better!

[thehardhatguy]

Wait. My desktop menu is now positioned to the right.

I fixed it. Thanks!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts