mobile menu vertical spacing

[Mike Simmons]

Hi, I’ve used customizer to adjust menu item height to make the logo the size I want, but that makes the vertical space between items much too much ….so, if you could kindly suggest css 🙂 thanks!

[David]

Hi there,

try this CSS where you can set the height of the logo and then adjust the menu item height in the Customizer:

@media (min-width: 769px) {
    .navigation-branding img {
        height: 150px !important;
    }
    
    .main-navigation .inside-navigation {
        align-items: center;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mike Simmons]

Thanks, that centered menu and made logo stay same size when adjusting menu line height….BUT,
now in tablet & mobile view logo becomes very small, and in mobile view, when I click on menu hamburger there seems to be no menu, just the X 🙂

[David]

You have the Mobile Header enabled so this falls back to the Primary Navigation > Menu Height which you can set separately for Mobile by clicking the mobile icon. Or you can use this CSS to change the logo size:

.site-logo.mobile-header-logo,
.site-logo.mobile-header-logo img {
    height: 80px;
}

Second issue – you have enabled the Off Canvas Panel which like the Primary or Secondary Nav is a menu location. So edit the Menu you want to display and check Off Canvas Panel in the locations.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mike Simmons]

Thanks….what I want is the logo to show on tablet and mobile, but mobile items to close together.

With mobile header on, the CSS ^^ didn’t seem to help – only way I can get mobile menu without a lot of whitespace is to adjust menu height in customizer, but that makes logo tiny (yes, clicked on mobile when adjusting…

Turning mobile header on or off doesn’t seem to affect anything that I can tell.

Right now everything seems good except for vertical spacing of mobile menu….using menu height makes logo too small, but mentioned that ha ha….thanks!

[Mike Simmons]

adjusted vertical spacing to what I want for mobile menu, now just need logo bigger on table and mobile. thanks!

[David]

Sorry my bad – i corrected the CSS https://generatepress.com/forums/topic/mobile-menu-vertical-spacing/#post-1047905

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mike Simmons]

found solution in this post

https://generatepress.com/forums/topic/menu-item-width/#post-596935

[Mike Simmons]

David, actually had to use your CSS (along with CSS here
https://generatepress.com/forums/topic/menu-item-width/#post-596935

otherwise mobile header is not tall enough….team effort, thanks!! 🙂

[David]

Awesome – glad to hear you got it working

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mike Simmons]

ended up taking out first CSS snippets you gave so can control size of desktop logo

here’s final CSS

@media (max-width: 768px) {
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 98px;
}
.menu-toggle, .main-navigation .mobile-bar-items a {
line-height: 88px;
}
}

.site-logo.mobile-header-logo,
.site-logo.mobile-header-logo img {
height: 98px;
}

[David]

Great – thanks for sharing

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts