Streamline Child Theme: Increasing font size in Primary Nav Menu

[biskinner]

Hello everyone! I want to increase the font size in my Primary Navigation Menu and I experimented with that (using the CSS Stylesheet) in a couple different places but it didn't actually change the font on my Primary Nav Menu, so I'm assuming I'm not changing the right code! Does anyone know where that exact piece of code is located? Thanks for your time! theskinnyonrealestate.com

[Terry]

Hi biskinner,

You can add font-size to the .primary-menu styling at line 283 of style.css.

Regards,

Terry

 

[biskinner]

Thanks Terry! Is there an easy way to locate line 283? As I'm looking at the stylesheet I don't seem to have any line numbers.

[Terry]

Oh, I'm so sorry. You can either install the "advanced code editor" plugin and it'll give you line numbers or I can give you more specific directions.

Sorry I ftp the files and edit them and sometimes forget.

Terry

[biskinner]

Zowie! That's a great plugin - thanks for the tip.

The code at line 286 is this:  font-size: 12px;

And I tried editing that before and it didn't have any effect on the menu font size. Is that because it doesn't apply to that particular area?

And just to be clear, if I do need to add additional code regarding the font, on line 283, do I input it the same way as line 286? Such as:  font-size: 14px;?

[Marco]

Hello,

after
`.menu-primary,
.menu-secondary,
#header .menu {
clear: both;
color: #aaa49f;
font-size: 12px;
margin: 0 auto;
overflow: hidden;
text-shadow: 1px 1px #000;
text-transform: uppercase;
width: 100%;
}`
add:
`.menu-primary {
font-size: 14px;
}`

save and refresh your home page.

---

Neat & Plain – Genesis and WordPress specialist

[Terry]

Glad the plugin worked for you!

Have you tried using Chrome Dev Tools or Firebug(FireFox)? Andrea has a fantastic Firebug tut. They are tools to provide visibility into your site from within the browser and are easy to use. They also let you change the css live to see the results w/out editing the css file.

Using Firebug it shows line 283 as the start of the .menu-primary, .menu-secondary, #header .menu styling as Marco showed above. Because you have only a single nav, you can change the font-size: 12px; to whatever you want and have it display.

Or just add the separate statement below (thanks Marco!).

If you've made either change, saved & refreshed and it's not showing up - clear your browser cache and reload.

Good Luck!

[biskinner]

Thank you both so much for your help! It worked very well!

And I can see where that plugin will really come in handy. I told a friend of mine about it too and he already installed it and is excited about using it.

 

[Author]

Posts