Make mobile menu shorter

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 5px to 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 1 year, 3 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