Reduce menu height on mobile

Greetings! What part of the mobile menu view are you wanting to reduce–the menu items themselves or the full height top to bottom (white background)?

Regards,
Andre

I need to reduce the white background of the mobile menu, top and bottom.

Without knowing your specific needs relating to your site’s navigation, the only adjustments without having to recode the complete menu are to copy and paste the following to the customizer’s Additional CSS tab:

.menu-wrapper {
justify-content: start;
}
.menu-modal {
bottom: 70%;
}

The bottom 70% can be set to whatever works for your specific needs; but if your menu has too many links, you will get a scrollbar on it.

Likewise, you could make the bottom as: bottom: auto;

The side effect of making it auto creates a jumpy menu if you need to click on any submenus.

It doesn’t work.

It can’t reduce height of mobile menu (padding-top / padding-bottom).

is your website live? I need to see this to get a better idea of what might be a possible solution.

Website is actually in maintenance mode.

hmm…it would have been easier to see it, but, let me think of another way that doesn’t require a complete recoding.

How many menu items does your menu have and are there any or a lot of submenus?

The problem is not submenu.

I need to reduce only margin top and bottom of header in mobile menu.

I decided to take screenshots off my phone and tablet for the demo site of Prologe. Let me know what areas (which are numbered) are you referencing?

Don’t collapse the menu in mobile. Just see a page with mobile menu, and see height of header bar.

Like this then?

Yes!

Try this out…

.header-inner {
    padding: 3.15rem 0;
}

.toggle-inner .toggle-text {
    display: none;
}

@media (min-width: 1000px) {
.toggle-inner .toggle-text {
    display: block;
}
}

The current default margins (in this case, it’s padding), can be adjusted with the .header-inner styling, which is 3.15rem (50px) padding on top and bottom. You can reduce that to whatever works for you.

To save a bit more space, the text that shows in smaller screens “Search and Menu”, you can hide those with the added code I pasted above for the toggle-inner toggle-text.

Basically, for the text stuff, it hides on mobile but reappears for larger screen resolution sizes/views that are 1000px or larger.

Hopefully the above CSS code works for you…

It works!

Awesome! Apologies for not quite understanding what you were referencing, but stating not to open the menu, helped. Anyway, glad it worked ??

Is it safe to set this topic as resolved?

Best Regards,
Andre