Hi @diegoroko ,
I want to replace mobile handheld menu style with the same style that is used for desktop. So in mobile instead of having the button with the 3 lines (hamburger?) I want to have just the text for the links (they are just 3 links so they fit just fine in a common mobile screen).
This is not possible out of the box, however, there’s a workaround which you can use. Please follow the steps below:
1. You will need to remove the default menu from mobile devices. For this, you can use the following CSS under Appearance > Customize > Additional CSS:
button.menu-toggle {
display: none;
}
Once done, the header would only have your logo (on mobile devices), and it would look somewhat like this: https://d.pr/i/hHHwhz
2. Next, you need to center the logo. For centering it only on mobile devices, you can add the following CSS:
@media only screen and (max-width: 960px) {
.site-branding {
float: none !important;
width: 100% !important;
}
img.custom-logo {
margin-left: auto;
margin-right: auto;
}
}
After this, your header would look like this: https://d.pr/i/H4uikv
3. Now you need to add the menu links below the logo. For this, you can use the Below Header widget as seen here: https://d.pr/i/mV4myh
You will find it under Appearance > Customize > Widgets.
In the below header widget, you can add Text widget, and then add your menu links as shown here: https://d.pr/i/0ZA0gI
After this, your header would look like this: https://d.pr/i/gbo9c9
4. Now you have to center the menu links, and make sure that the links show only on mobiles and not on desktop versions of the site. For that, you can use the following CSS:
#text-6 {
text-align: center;
}
@media only screen and (min-width: 960px) {
#text-6 {
display: none;
}
}
Once you add the above CSS, the header would just like you need. Here’s a screenshot of the final result: https://d.pr/i/4JY8Ed
I hope this helps!
