Mobile menu No hamburger

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.

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

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

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

What happens if you Disable the Sticky Navigation ?

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

Leave the Sticky Navigation disabled and add this CSS:

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

That's perfect!

Thanks a lot,
Silvia

You're welcome