Forums

[resolved] How to Add Color to One Menu Item? (13 posts)

  1. bobover3
    Member
    Posted 10 months ago #

    I want to draw attention to one item on my menu by making it a different color. Can anyone tell me where to find the code for my menu, and what code to add to specify a color for one item?

    My theme is The Morning After.

    I know this is hard to do, but advice from a WordPress expert would be greatly appreciated.

  2. esmi
    Theme Diva & Forum Moderator
    Posted 10 months ago #

    There are literally thousands of WordPress themes - which means that many people won't be familiar with your particular theme. So a link to your site where people can see the theme might result in more responses.

  3. bobover3
    Member
    Posted 10 months ago #

  4. esmi
    Theme Diva & Forum Moderator
    Posted 10 months ago #

    Which menu item do you need to highlight?

  5. bobover3
    Member
    Posted 10 months ago #

    The tab on the far right that says "MEMBERSHIP."

  6. do77
    Member
    Posted 10 months ago #

    You need to assign a class with a background color to the list item "Membership" .

  7. bobover3
    Member
    Posted 10 months ago #

    "You need to assign a class with a background color to the list item "Membership".

    I apologize for my ignorance, but what's a "class," and how do I use it to assign a background color? Is there documentation I could read? You can tell I'm no programmer, so think of this as leading the blind.

  8. do77
    Member
    Posted 10 months ago #

    There are loads of documentation about that. Just google for "CSS", "Classes" and "background-color".

    Basically you have to edit your style.css file and create a new class .featured (or so). Then you give the class a background-color, like this:

    .featured {background-color: #ff0000;}

    Then you need to edit your header.php file and find the code for the navigation bar. The class you just created needs to be assigned to the last list item.

    <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li class="featured">last item</li>
    </ul>

    So yeah, that's basically how it works but when you have only little experience with css/html you should definitely read some tutorials first. Otherwise it can be a little frustrating...

  9. esmi
    Theme Diva & Forum Moderator
    Posted 10 months ago #

    You need to assign a class with a background color to the list item "Membership"

    I'm sorry but that's rubbish! wp-nav_menu already generates all of the ids and classes needed.

    @bobover3: Try adding:
    .nav #menu-item-1702 a {color: #c00;}

    to the bottom of your theme's style.css file. That will turn the text of the Membership link red. It may not be exactly what you want but it should get you started.

  10. do77
    Member
    Posted 10 months ago #

    I'm sorry but that's not rubbish. If you want to highlight a menu item (and not just the color of the font) why not doing the navbar by hand, assigning a class and that's it. Its not mandatory to use wp-nav_menu...

  11. esmi
    Theme Diva & Forum Moderator
    Posted 10 months ago #

    You can style the background using the same CSS rule and just a different property.

  12. bobover3
    Member
    Posted 10 months ago #

    Esmi, you saved the day once more! I followed your instructions, and it worked perfectly. You're a genius and a saint!

    Thank you so much!

  13. esmi
    Theme Diva & Forum Moderator
    Posted 10 months ago #

    Glad I could help :-)

Reply

You must log in to post.

About this Topic

Tags