Archived topic

split menu doesn't work on tablet + logo size

3 replies · Started by Eva on May 19, 2020

Viewing posts 1–4 of 4

May 19, 2020 at 2:40 pm #1292730

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

May 20, 2020 at 12:45 am #1293257

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.

May 20, 2020 at 10:01 am #1294176

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

May 20, 2020 at 2:30 pm #1294490

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 :)

This archived topic is closed to new replies.

Start building better websites today.