how do I change the size of menu text with CSS?
-
I want to make the size of the base font (menu text) something between the “normal” and “large” options provided.
The normal size is too small and the large size is too big and doesn’t allow everything on the menu to fit on one line in the tablet version of my site.
My site is http://lakestarstable.com
Thanks in advance for the help!
The blog I need help with is: (visible only to logged in users)
-
Hi there, you can add the following custom CSS and then adjust the 16.9px value as desired.
.wf-active .sf-menu a, .wf-active .sf-menu a:visited { font-size: 16.9px; } -
-
How do I make the tablet version of my site have a different size menu text than the computer version of my site?
-
We can use a Media Query to set the font size for the touch device menu, which appears on widths of 767px and narrower screens/windows.
@media screen and (max-width: 767px) { .wf-active .sf-menu a, .wf-active .sf-menu a:visited { font-size: 16.9px; } } -
This code doesn’t seem to be working. I don’t have a tablet to check if it’s working on a tablet, but it should show up when I click the tablet icon under the CSS customizer and it doesn’t.
I adjust the 16.9px and it doesn’t change anything. Any ideas?
-
Oops, change what I had given to the following and adjust as desired.
@media screen and (max-width: 767px) { .primary-menu-responsive a, .primary-menu-responsive a:visited { font-size: 10px; } } -
-
The code I gave only affects the touch device menu (the one that appears when you click the menu bar at the top of the screen, which activates on screens narrower than 768px. Are you wanting to change the size of the full main navigation text, before it changes to the touch device menu?
I’ve tested directly in your customizer and the font size is changing on the touch device menu with the code I gave.
- The topic ‘how do I change the size of menu text with CSS?’ is closed to new replies.