🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Support request] Mobile menu No hamburger

Home Forums Support Mobile menu No hamburger

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1133912
    Sílvia

    Hello,

    I’m working in the mobile version of a website and I would like the menu not to be hamburger style.
    The menu has just 5 words (without a submenu) and I would like it to be like a desktop menu under the header in just one line. It could be with the text a bit smaller or with a shorter space between each of the words or titles if necessary.
    Can you please help me with it?

    Thanks in advance,
    Silvia

    #1133990
    David
    Staff
    Customer Support

    Hi there,

    you can add some CSS like this:

    @media(max-width: 768px) {
        .main-navigation .menu-toggle {
            display: none !important;
        }
    
        .main-navigation ul {
            display: block !important;
        }
    
        .main-navigation .main-nav ul li a {
            padding-left: 5px;
            padding-right: 5px;
            font-size: 12px !important;
        }
    }

    You can see i have put the font-size down to 12px and reduced the space between items to 10px (combined) – and they all fit on one line on my iPhone 7+ but not smaller phones – however Google will most likely penalise you’re site for:

    1. Text too small
    2. Clickable items too close together.

    So it may not be the best idea if it makes the site less accessible.

    #1134273
    Sílvia

    Thanks for your advice and your help, David. This is my husband’s Website
    so, I’ll comment what you told me about Google and I’ll let him decide what to do.
    The CSS code you gave me works perfectly, I’ve just changed the size of the text to 13px and the padding in the list to 10px (left and right) in order to have it in two lines even in smaller mobile devices.
    Now, there is just one thing that doesn’t work:
    I want the sticky navigation only on desktop, but I realize that the menu is still visible on mobile. Any idea of what can I do?

    Thank you,
    Silvia

    #1134292
    David
    Staff
    Customer Support

    In Customizer > Layout > Sticky Navigation you can change it to apply only on Desktop.

    #1134370
    Sílvia

    It’s done this way but it still doesn’t work.

    #1134371
    Sílvia

    Stiky navigation desktop only

    #1134836
    David
    Staff
    Customer Support

    What happens if you Disable the Sticky Navigation ?

    #1134856
    Sílvia

    It works perfectly on mobile (there isn’t sticky navigation anymore) but it isn’t on desktop either, which is something that I’d like it to be there.

    Silvia

    #1134893
    David
    Staff
    Customer Support

    Leave the Sticky Navigation disabled and add this CSS:

    @media (min-width: 769px) {
        .main-navigation {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
        }
    }
    #1135472
    Sílvia

    That’s perfect!

    Thanks a lot,
    Silvia

    #1135787
    David
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.