How to Change Menu Line Height

[MollieHammond]

Hi all, 

Hoping someone could please assist me. I am trying to condense the menu on our website as at the moment, it is quite spaced out and looks a bit silly. 

Website is https://www.coffee.prestigerepairs.com.au/

Theme is Palo Alto. 

As the picture below displays, where I have scribbled in Blue is quite a lot of dead space. 

Would be so appreciate if anyone has an idea about this. 

Thank you in advance!

[ManKaveStore]

If you go into the custom CSS inside your theme editor it's easier to try out what changes you can make; alternatively, you can simply just go to edit code, base.css and add the code at the bottom. I'm no expert.. but I can think of a couple of ways to get this done. Either adjust the entire height for that entire section

.mobile-nav 

{

height: 60vh !important;

}

Or you can adjust the height or spacing for each nav item

.mobile-menu__item {

height: 100px !important;

}

You do not need !important inside the theme editor, but you will need it if you put this into base.css.

[Dan-From-Ryviu · Accepted solution]

Hi @MollieHammond 

Please add this code to Custom CSS in your Online Store > Themes > Customize > Theme settings 

.mobile-navlink--level-1 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.mobile-menu__item--has-items {
    align-items: center;
}
.mobile-nav__trigger--level-1 {
    height: 40px !important;
}

 

[MollieHammond]

This worked perfectly! Thank you so so much!

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
.mobile-nav {
    --line-height: 0.8 !important;
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!