[Support request] split menu doesn't work on tablet + logo size

Home Forums Support split menu doesn't work on tablet + logo size

  • This topic has 3 replies, 3 voices, and was last updated 4 months ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1292730
    Eva

    Hi, hope everybody is well and healthy @generatepress!
    For the site I am working on I made a split menu as described here https://docs.generatepress.com/article/centering-logo-navigation, and I adjusted it like this https://generatepress.com/forums/topic/split-menu-not-displaying-well-on-mobile/#post-1281271.
    Now it works on desktop and phone, but it looks pretty weird on a tablet (horizontal). Moreover, I can’t seem to adjust the font size of the menu for tablet anymore. And finally I would like to know if there is an ideal size for a logo when using it in a split menu, and should I use a different size for the site identity and the mobile header.

    Sorry for all those questions and thank you in advance!
    Eva

    #1293257
    David
    Staff
    Customer Support

    Hi there,

    try increasing the Mobile Menu Breakpoint 860px in Customizer > Layout > Primary Navigation.

    There is no ideal size for a split menu logo.
    It really depends on the minimum width the horizontal menu is still displayed – by default that is 768px which doesn’t leave a lot of room when divided up amongst 8 elements.

    #1294176
    Eva

    Thank you David, that seems to works fine depending on the browser. For instance, it still looks kind of strange when I use Duckduckgo on a Samsung tablet in horizontal mode. The menu splits up the menu-items in 2 rows and the logo is positioned between those two rows. Maybe I should also change the Navigation Drop Point?
    I actually prefer a centered logo with a menu below, because then I know there won’t be any problems. But my client prefers the split menu…
    Thanks again,
    Eva

    #1294490
    Tom
    Lead Developer
    Lead Developer

    You could force the navigation to drop down at a specific width like this:

    @media (max-width: 920px) {
        .inside-header {
            flex-direction: column;
        }
    
        .main-navigation:not(#mobile-header) .site-logo {
            position: relative;
            left: unset;
            transform: unset;
            display: block;
        }
    
        .main-navigation .menu-item-separator {
            display: none;
        }
    
        .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
            justify-content: center;
        }
    }

    Let me know if that helps or not 🙂

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