Menu bar font changes

• 

  journeyingthroughthebible · Member · Jun 24, 2014 at 2:28 pm

  • Copy link
  • Add topic to favorites

  Hi, I have the Twenty-Ten theme with a Custom Design upgrade. How can I use CSS to modify the size of the fonts in my main menu (under the banner image? Currently, they’re tied in to the Headings fonts – when I change the Heading font, the menu font changes with them. But I would like a different font size/style for the menu headings (to be precise, I want to make them a little smaller, so I can get all the menu items on one line).
  Any help would be much appreciated.
  Many thanks

  The blog I need help with is: (visible only to logged in users)

• 

  jeffcreamer · Member · Jun 24, 2014 at 3:03 pm

  • Copy link

  Hello,

  In the place where you’re allowed to put your css, try:

  #access .menu-header, div.menu {
      font-size: 13px;

  That should take it down 1px in size from its current 14px. See if that works.

  Did you say you also wanted to change the font style?

• 

  designsimply · Member · Jun 24, 2014 at 3:27 pm

  • Copy link

  To modify the font size for main menu items in the Twenty Ten theme, add this to your Appearance > Customize > CSS editor:

  #access a {
  	font-size: 80%;
  }

  Adjust the 80% value as needed.

  You might also like:
  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

• 

  journeyingthroughthebible · Member · Jun 24, 2014 at 3:45 pm

  • Copy link

  Hi
  Many thanks to both of you

  This code worked well:
  #access a {
  font-size: 80%;
  }

  I found I could use a px size or percentage – both worked. Yes, I did want to do other changes, but found the w3schools page at
  http://www.w3schools.com/css/css_font.asp
  helpful. I was able to change the font weight and size, for example:

  #access a {
  font-size: 13px;
  font-weight: bold;
  font-family: Arial;
  }
  Problem now solved, so thanks for your advice.