Archived topic
Problems with Mobile Navigation Menu
5 replies · Started by Kaelum on June 9, 2020
Hi there,
The primary navigation bar of my website is built on a slim single-row bar with the various categories displayed (as you can tell if you access the desktop version).
I want the same look to appear in the mobile version (where the headers appear on one layer) and have tried to decrease the text size to ensure this happens.
However whenever I change the mobile version of the text on generate press (currently set to 22 on desktop, 18 on mobile) the mobile text remains exactly the same as desktop, and its forcing my navigation bar to display across 2 rows (as you'll see if you access the site via mobile).
I've tried replicating this by using Chrome's built-in mobile viewer (not just my own mobile) and the same thing shows.
I have tried removing cache both from wordpress, my hosting service and originally tried this about a week ago (many other changes have worked fine on the site since then).
Any ideas please?
Thanks
Hi there,
the mobile menu font size only applies when the Mobile Menu is displayed.
Try adding this CSS:
@media (max-width: 768px) {
.main-navigation a {
font-size: 16px;
}
}Thanks David, that seems to have worked a treat :)
Just a question on the CSS, does that mean if a screen has less than 768 pixels it then displays the smaller text size?
Only thing I don't like it if that then affects some tablet users (where I expect the small font to look bad in comparison to the main font size on a tablet) - Is there any way around this if I've got it right?
I'll take the current approach as a solution if there isn't an easy way, thanks.
Thats correct. You can change max-width: 768px to max-width: 420px then it will apply to Plus Size Mobiles and smaller
Perfect, thanks again :)
You're welcome
