[Support request] mobile menu vertical spacing

Home Forums Support mobile menu vertical spacing

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1047449
    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!

    #1047668
    David
    Staff
    Customer Support

    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;
        }
    }
    #1047878
    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 🙂

    #1047905
    David
    Staff
    Customer Support

    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.

    #1048021
    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!

    #1048026
    Mike Simmons

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

    #1048031
    David
    Staff
    Customer Support
    #1048032
    Mike Simmons
    #1048038
    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!! 🙂

    #1048048
    David
    Staff
    Customer Support

    Awesome – glad to hear you got it working

    #1048059
    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;
    }

    #1048303
    David
    Staff
    Customer Support

    Great – thanks for sharing

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.