Site logo

Archived topic

make my hamburger menu bigger

18 replies · Started by diedrich on January 2, 2021

Viewing posts 1–15 of 19

hello, how do I make my hamburger menu bigger on the mobile view?

greeting Diedrich

Hi there,

can you share a link to your site so i can see what setup you have

Go to Customizer > Typography > Primary Navigation - click the mobile view then increase the Font size and i would recommend increasing the line-height. This will increase not just you icon but the text of all your mobile menu links - which you should do as currently your mobile menu links are too small and Google will dislike you for that.

thank you David and how big should I make it so google will like me ?😄

We don't have an exact answer for that unfortunately.

For this site, we are using 16px for font size and 60px for line height.

Thank You David and Leo

where can I find this "60px for line height."

and if you go to menu > bootlegs audio > David Bowie Tour Recordings : the last 4 submenus are not showing on iPhone mobile: how can I fix this?

Hi there,

the minimum height your want is 45px, i recommend you keep this at least 54px.
The line-height is the Menu Item Height in Customizer > Layout > Primary Navigation.

For the menu issue not being able to reach the last two menu items... you have two options:

1. Activate the Off Canvas Panel for Mobile as this is much better for really long menus:

https://docs.generatepress.com/article/off-canvas-panel-overview/

OR

2. Add this CSS:

@media(max-width: 768px) {
    .main-navigation.toggled .main-nav > ul  {
        max-height: calc(100vh - 60px);
        overflow: auto; padding-bottom: 60px;
    }
}

Off Canvas Panel for Mobile works perfect ,
sorry 2 problem ,
I have now in the menu also the hamburger menu (2 menu's)
and how do I get the hamburger menu centered on mobile

can we fix that?

thanks David and Leo

Yeah thats a bug - that will be fixed in the next update. Until then, add this CSS:

@media (max-width: 1125px) {
    .main-navigation .menu-bar-items {
        display: none;
    }
}

Thank you David
centering the hamburger menu is also a bug?

No - it simply matches the alignment from the Primary Nav.
You can use this CSS to center ir

@media(max-width: 1125px) {
    .main-navigation .inside-navigation {
        justify-content: center;
    }
}

hi David
1 of 2 codes I had to use is not correct, I still have 2 menus in my menu bar

the other code is correct , can you help me ?

I have delete my cache/plugin inactive

===============================================================
Yeah thats a bug – that will be fixed in the next update. Until then, add this CSS:

@media (max-width: 1125px) {
.main-navigation .menu-bar-items {
display: none;
}
}

Change this:

@media (max-width: 1125px) {
    .main-navigation .menu-bar-items {
        display: none;
    }
}

to:

.main-navigation .menu-bar-items {
    display: none;
}

hi David
it's works fine

thank you very much and have a nice day

This archived topic is closed to new replies.