how do I change the size of menu text with CSS?

• 

  egburns · Member · Jan 19, 2016 at 11:14 pm

  • Copy link
  • Add topic to favorites

  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)

• 

  thesacredpath · Member · Jan 20, 2016 at 7:10 am

  • Copy link

  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;
  }

• 

  egburns · Member · Jan 21, 2016 at 3:51 pm

  • Copy link

  thank you!

• 

  egburns · Member · Jan 21, 2016 at 3:56 pm

  • Copy link

  How do I make the tablet version of my site have a different size menu text than the computer version of my site?

• 

  thesacredpath · Member · Jan 22, 2016 at 6:17 am

  • Copy link

  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;
  }
  }

• 

  egburns · Member · Jan 28, 2016 at 1:25 am

  • Copy link

  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?

• 

  thesacredpath · Member · Jan 28, 2016 at 7:45 am

  • Copy link

  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;
  }
  }

• 

  egburns · Member · Jan 28, 2016 at 8:05 am

  • Copy link

  that one isn’t working either

• 

  thesacredpath · Member · Jan 28, 2016 at 9:21 pm

  • Copy link

  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.