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).
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.