[Resolved] Menu

[Max]

Hi how can i fix this?
If you need some extra information let me know

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Max]

I have the website URL in the private tab

[Ying]

Hi Max,

Can you tell me what’s the issue you are having exactly?
Thanks!

[Max]

This

[David]

Hi there,

go to Customizer > Layout > Header and enable the Mobile Header and add a Logo to the mobile header logo field.
Then add this CSS:

#mobile-header .inside-navigation {
    justify-content: initial;
}

#mobile-header .menu-toggle {
    order: -1;
}

[Max]

My logo doesnt appear

[David]

Thats because the Menu Item height is too small.

Go to Customizer > Layout > Primary Navigation, switch to Mobile view and increase the Menu Item Height – its currently set at 20px – you should have a minimum of 60px.

[Max]

Thanks for the help David!
I got three other questions. Can i make the toggle look bigger? (on mobile and tablet) And i want the logo in the center on tablet format (now it is to the left)

And do you have suggestions about mobile menu breakpoint and navigation drop point?
Keep in mind that i want to toggle also on tablet format.

[Elvin]

Hi Max,

And do you have suggestions about mobile menu breakpoint and navigation drop point?
Keep in mind that i want to toggle also on tablet format.

You can set the breakpoint to 1024px if you want the toggle to appear on tablet. But also keep in mind that some tablet sizes share the same dimensions as smaller desktops so for smaller desktop screens, you’ll see the toggle.

I got three other questions. Can i make the toggle look bigger? (on mobile and tablet) And i want the logo in the center on tablet format (now it is to the left)

You can change the toggle icon size and the logo alignment with CSS:

For the toggle size, try this:

button.menu-toggle svg {
    height: auto;
    width: 2em;
}

For the centering of logo:

I’m not sure what header your site is using as I can’t inspect it (not loading).

But If it has mobile header enabled, try this CSS – https://docs.generatepress.com/article/centering-logo-mobile-header/

For default desktop, try this CSS – https://docs.generatepress.com/article/centering-logo-navigation/

[Max]

The height isn’t good. how can i fix it that it is in the middle?

[Leo]

Edit this CSS:

#mobile-header .menu-toggle {
    display: flex;
}

To this:

#mobile-header .menu-toggle {
    order: -1;
    display: flex;
}

[Max]

Thank you Leo!

[Leo]

No problem 🙂

[Author]

Posts