Nav Bar height

Shapely
1

Am I missing a place to set the nav bar height? It is so small, my logo is barely legible. I need the height bigger. I found the height is set at 55px in multiple places. Please let me know if I can set this somewhere on the front end, or is my only solution to update the CSS? Thanks.

2

Hi @bzsim8,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


#page .nav-bar a,
#page .nav-bar,
#page .nav-bar .module,
#page .nav-bar .module-group {
    min-height: 75px;
    max-height: 100%;
}
img.logo {
    max-height: 100%;
}

Best Regards,
Movin

3

Hello,
I wanted to archive same thing. My logo is now OK but Mobile “Menu” seems broken.

www.level-of-details.com - any advice?

Tested on Chrome & IE.

4

@denson You can try using the below CSS code instead so that it won’t affect mobile menu.

@media (min-width: 991px){
#page .nav-bar .menu > li > a,
#page .nav-bar,
#page .nav-bar .module,
#page .nav-bar .module-group {
    min-height: 75px;
    max-height: 100%;
}
img.logo {
    max-height: 100%;
}
}
5

Works like a charm

Thanks You :slight_smile:

6

You are most welcome here :slight_smile:

7

Hello again,

One more issue with this code.
Sub-menu’s on Desktop is affected by height also. In mobile they are OK.

8

I have updated the above CSS code to resolve the issue so try using this updated CSS code.

9

Ok, had problem with logo again - but after i change

img.logo {
max-height: 100%; to 76px;

All looks fine at this moment :slight_smile:

10

You are always welcome here :slight_smile: