• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Change font for specific menu item

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: font, menu

  • This topic has 4 replies, 2 voices, and was last updated 10 years, 3 months ago by Brian Bourn.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 22, 2013 at 4:06 pm #22299
    dbr_online
    Member

    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.

     

    February 22, 2013 at 4:21 pm #22301
    Brian Bourn
    Member

    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

    February 22, 2013 at 4:49 pm #22310
    dbr_online
    Member

    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.

     

    February 22, 2013 at 5:08 pm #22311
    dbr_online
    Member

    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;
    }
    
    
    February 22, 2013 at 7:27 pm #22329
    Brian Bourn
    Member

    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
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble