Mobile menu layout help and menu breaking points for desktop

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 :)

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?

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

Let me know if it helps :)

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).

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;
    }
}

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.

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.

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

Your logo is too wide for it to fit.

You can try adding something like this:

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

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

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.

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

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 :)

Hi Tom,

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