Change font for specific menu item

Community Forums Forums Design Tips and Tricks Change font for specific menu item

This topic is: not resolved

Tagged: ,

This topic contains 4 replies, has 2 voices, and was last updated by  Brian Bourn 1 year, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #22299

    dbr_online
    Participant
    Post count: 5

    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.

     

    #22301

    Brian Bourn
    Participant
    Post count: 98

    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

    [css] .menu-times {
    font-family: ‘Times New Roman’, serif;
    }[/css]


    Bourn Creative | bourncreative.com | Twitter

    #22310

    dbr_online
    Participant
    Post count: 5

    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.

     

    #22311

    dbr_online
    Participant
    Post count: 5

    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:

    [css]
    .menu-times {
    font-family: ‘Times New Roman’, serif;
    font-weight: bold;
    font-size: 16px;
    }

    [/css]

    #22329

    Brian Bourn
    Participant
    Post count: 98

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.