Make mobile menu shorter
-
Hello, is it possible, to make mobile menu shorter? So I’d like to change the height of each menu item from 50px to 35px or something.
Take a look: https://imgur.com/a/9EvJQ2y
Thank you.
-
This topic was modified 2 years, 6 months ago by
boombatze.
The page I need help with: [log in to see the link]
-
This topic was modified 2 years, 6 months ago by
-
Sure. There is an option (“Customizer – Nav Options – Navigation Link Vertical Padding”) to do this currently on larger screens but it doesn’t apply to mobile / smaller screens. Not sure why … I guess there’s never been a call for it! Anyway, try adding this to “Customizer – Additional CSS” …
@media screen and (max-width: 48em) { .main-navigation a { padding-top: 5px; padding-bottom: 5px; } }… changing
5pxto your desired value.Oliver
Hey Oliver, thanks for your reply. Unfortunately this doesn’t work. But it could help me too, if i could scroll down the menu, so you can see all items, if you scroll down.
Thanks, Marcus
-
This reply was modified 2 years, 6 months ago by
boombatze.
Hi Marcus,
I’m really sorry but the way that the native menu in Twenty Seventeen has been constructed, it does not allow for the mobile menu to be fixed and scrollable because, to do so you would need to target it with this CSS …
.navigation-top { bottom: 0; overflow-y: scroll; }However, this then makes the site un-usable because you cannot target this element only when the menu is open.
I would therefore recommend that instead of using the native menu that you take a look at our other plugin SideMenu which can hijack the mobile menu and replace it with a scrollable one.
Sorry if this was not the answer you wanted.
Oliver
-
This reply was modified 2 years, 6 months ago by
The topic ‘Make mobile menu shorter’ is closed to new replies.