Change font for specific menu item

[dbr_online]

Is there a way to change the font for a specific navigation menu item? I would like to change only one item to Times Roman and leave the other items with the default font.

 

[Brian Bourn]

Yes. On the menu screen click on the screen options link in the upper right and make sure that CSS classes is checked. After that you can expand one of your menu links and add a CSS class (something like menu-times).

Once the class is added you can add some CSS to your style.css file

 .menu-times {
font-family: 'Times New Roman', serif;
}

---

Bourn Creative | bourncreative.com | Twitter

[dbr_online]

Thanks for the quick response Brian.

I got it to work per your instructions, however, I realized the menu item has several words and I only need two of them to be Times Roman. Any chance this can happen?

Here is the link to the site and the menu item is called Benefits of GYROTONIC® and GYROKINESIS®. I just need GYROTONIC®, GYROKINESIS® to be Times Roman.

 

[dbr_online]

Also, I tried modifying the font-size, but it seems to be ignored in the Style.css file. It does recognize bold. Is there another place where I should be indicating the font size? Here is the code that I used in my Style.css file:

.menu-times {
font-family: 'Times New Roman', serif;
font-weight: bold;
font-size: 16px;
}

[Brian Bourn]

You're not going to be able to just change some of the words' font family. You may need to use a different selector like .menu-times a or something else in the cascade to target your custom class.

---

Bourn Creative | bourncreative.com | Twitter

[Author]

Posts