- This topic has 10 replies, 2 voices, and was last updated 6 years, 2 months ago by
.
-
Posts
-
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,
SilviaCustomer 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.
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,
SilviaIn 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,
SilviaYou’re welcome
- You must be logged in to reply to this topic.
