The Pictorico Theme – How to change font and size of menu ?!

• 

  annemonetaake · Member · Aug 9, 2014 at 10:17 am

  • Copy link
  • Add topic to favorites

  Hi, i am using The Pictorico Theme and i can´t figure out how to change the fond and size of the menue .
  Would be nice not to have 3 different fonds o the front page but only use the one i chose for the blogtitle.
  Also, does anyone know how to get rid of the “search” thing on the header ?

  As you can tell, i am stuck in learning by doing here ;)

  Thank you so much !

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

• 

  sandymcfadden · Member · Aug 10, 2014 at 6:40 pm

  • Copy link

  Hi annemonetaake,

  I think the following custom css could give you at least a good start for what you’re looking to do.

  If you copy and paste this into the Custom CSS section of the customizer of your theme you should be able to see the changes.

  #site-navigation .menu-item a {
    font-family: omnes-pro-1,omnes-pro-2,"Open Sans Condensed",Helvetica,Arial,sans-serif;
    font-size: 18px;
      font-weight: normal;
  }
  #site-navigation .sub-menu a {
      font-size: 16px;
  }
  
  .site-branding {
      border-right: none;
      width: 50%;
  }
  
  .header-search {
      display: none;
  }

  Let me know how that works out for you.

• 

  annemonetaake · Member · Aug 11, 2014 at 11:40 am

  • Copy link

  sandymcfadden,

  you are a genius !
  Thank you so much, i was pretty close to “just leave it tha way and ignore it forever” :)

  Cheers

• 

  sandymcfadden · Member · Aug 11, 2014 at 12:59 pm

  • Copy link

  Excellent, so glad it worked for you.

• 

  mblifeinsurance · Member · Aug 28, 2014 at 3:22 am

  • Copy link

  Hi this doesn’t work for me. My menu fonts didn’t changed a bit. Here’s my URL: mblifeinsurance.wordpress.com. Please help. I wanted it smaller.

• 

  hallluke · Member · Aug 28, 2014 at 6:30 am

  • Copy link

  It looks like you already have some code to size the menu fonts in your custom CSS. Try changing the font size in the first declaration and (unless you want the font to be a different size when a visitor moves the mouse over a menu link) delete the second declaration completely:

  .main-navigation a{
  	font-size:14px;
  	font-weight:400
  }
  
  .main-navigation a:hover{
  	font-size:14px;
  	font-weight:400
  }