[Resolved] Mobile menu layout help and menu breaking points for desktop

[Zoran]

Hi

I’m trying to achieve this layout on mobile: https://www.betreuungmitherz.ch/ but I’ve had little luck!

Also, I’ve noticed that when I resize the screen the menu breaks into multiple rows. How do I stop it from doing that? I want it to remain in one row (below the logo if there is no space)?

[Leo]

Hi there,

1. That would be the default layout of our mobile header option:
https://docs.generatepress.com/article/mobile-header/

2. You will need to increase the mobile header breakpoint so that it changes to a toggle before it breaks into 2 lines:
https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

Let me know if this helps 🙂

[Zoran]

Hi,

1. doesn’t seem to be working (perhaps because I did these other steps you told me when styling the desktop menu : https://generatepress.com/forums/topic/styling-navigation-menu/)

2. Is there a way for the navigation to go below the navigation logo before it breaks into 2 lines?

[Tom]

You can use our Navigation Drop Point to achieve that: https://docs.generatepress.com/article/navigation-drop-point/

Let me know if it helps 🙂

[Zoran]

Hi Tom,

I cannot use the float option as the current configuration has the header as hidden and the navigation is Below header (I linked it in my previous post).

[Tom]

Ah, sorry about that!

Try this:

@media (max-width: 1200px) {
    .main-navigation .navigation-logo {
        float: none;
        margin: 0 auto;
    }

    .main-navigation .navigation-logo img {
        margin: 0 auto;
    }

    .nav-aligned-right .main-navigation {
        text-align: center;
    }
}

[Zoran]

Hi,

This works like a charm (just set the max-width query to 1460px), thank you!

I’m still left with the mobile menu being centered below the logo

I have tried the mobile header idea and it did not work.

[Tom]

What about it didn’t work exactly? The mobile header is the best way to get the mobile toggle to the right of the logo.

[Zoran]

Activating it doesn’t really change much. It’s still below the logo.

[Tom]

Your logo is too wide for it to fit.

You can try adding something like this:

.mobile-header-logo img {
    width: 50%;
}

[Zoran]

It doesn’t work. There’s a margin on the image that I can’t get rid of for some reason.

[Tom]

It’s hard for me to tell what’s going on without being able to inspect the code myself. Any chance you can save the mobile header option so I can take a look? You can remove that CSS for now.

[Zoran]

Hi, yes, sorry, I’ve enabled the mobile header now.

[Tom]

So that’s happening because of this custom CSS:

@media (max-width: 768px) {
    .menu-toggle {
        margin-left: 25%;
        margin-right: 37%;
    }
}

If you remove that, it should work.

Let me know 🙂

[Zoran]

Hi Tom,

Removing that CSS didn’t help (I tried it before, too, it is removed now).

[Author]

Posts