WordPress.org

Support

Support » How-To and Troubleshooting » How to change hover color for each menu item individually

How to change hover color for each menu item individually

  • Hello All,

    I have installed the child theme like everybody here suggests. I am using the twenty eleven theme.

    I am trying to customize the hover color i.e. different hover colors for different menu items. I have tried searching online for this, but no luck so far.

    Please take a look at my website if that helps. I want to change hover colors for the menu items, (Home, recent publications, members etc).

    Thanks a lot for your time.

Viewing 15 replies - 1 through 15 (of 39 total)
  • Your website URL is not posted here.

    To change the color of the font when you hover over it, simply:

    1. Open styles.css of the theme you are using (themes are stored in /wp-content/themes/)
    2. Find a:hover section
    3. Add new colour between the curly brackets {}

    yeah i understand that, but it changes the color for all the menu items. I want to apply different color for different menu items.

    sorry forgot to mention my website. please take a look here. http://www.researchverse.com

    you have to use different style classes.

    so in your html, the menu could look like this:

    <div id="menu">
    <ul>
    <li class="red">home</li>
    <li class="green">about us</li>
    <li class="blue">contact</li>
    </ul>
    </div>

    and in your css, it would look like this:

    .red a:hover{
    color: #ff0000;
    }
    
    .green a:hover{
    color: #00ff00;
    }
    
    .blue a:hover{
    color: #0000ff;
    }

    deepbevel
    Member

    @deepbevel

    I’ve wanted to understand how this works for a while, does the html go in the header? how does it work with the php code which dynamically creates new menu items? seems it would have to over ride it..?

    That is what I was wondering. I looked at the header file where there’s html info about navigation. Figured that the navigation bar is dynamically created. I am not exactly sure but may be we have to hard code the above info into the header file.

    Can anyone please provide some help on how to do this? where exactly to include the above html code in the header.php file?

    Thanks a lot guys.

    I am surprised how responsive and helpful people are on here. 😀

    deepbevel
    Member

    @deepbevel

    I see html for my sites in Firebug (a dev tool) but it doesn’t appear in my theme files so I never know how to edit it. It’s always spooked me.

    deepbevel
    Member

    @deepbevel

    not expecting a live tutorial,. but if anyone can post a relevant link that would be great. If I could get a clue I’d be happy to assist the member and teach myself at the same time. where’s the html?

    based on the twenty eleven template, in the header.php file you would need to scroll down near the bottom and replace:

    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

    with your hardcode menu, something like this:

    <ul>
    <li class="red"><a href="http://www.yoursite.com">home</a></li>
    <li class="green"><a href="http://www.yoursite.com/about_us">about us</a></li>
    <li class="blue"><a href="http://www.yoursite.com/contact_us">contact</a></li>
    </ul>

    then in the css file, add this:

    #access .red a:hover{
    color: #ff0000;
    }
    
    #access .green a:hover{
    color: #00ff00;
    }
    
    #access .blue a:hover{
    color: #0000ff;
    }

    see if that works.

    Actually, I’ve just tried it out and it does work 🙂

    I saw that the menu uses a div called ‘access’, so we have to refer to that when setting up the classes.

    Im sure you probably wanted the background to change instead of the text, but its a start. At least you can now tailor the css how you want now that you know how to isolate each menu item.

    deepbevel
    Member

    @deepbevel

    So it appears the default html never exists except when rendered. But one can over ride it by removing the php as you explianed. That’s soooo good to know. Thanks so much!

    Thanks a lot it5. This is awesome!!1

    I have one more question:

    So what you said works exactly like it should. Now when a menu item is selected, it is not highlighted or anything. For example- in my website, I want to highlight the current menu item with some background color.

    Can you please tell me how to do this?

    I tried playing with the code below but it didn’t work.

    #access .current-menu-item > a,
    #access .current-menu-ancestor > a,
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
    font-weight: bold;
    color:black;

    deepbevel
    Member

    @deepbevel

    this is what works on my site

    #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access li.selected > a, #access ul li.current-menu-parent > a, #access ul li.current_page_item > a:hover, #access ul li.current-menu-item > a:hover {
        background-color: #333333);
    }

    could just be your missing the closing bracket?

    I tried this, it didn’t work. What I have done on my site is use the code it5 mentioned above and highlight each menu item with different background color when hovered. Now, let’s say I click on the menu item after hovering, I want to keep the menu item highlighted, so the user knows what tab they are on.

    right now, i haven;t been able to figure this out. Help would be much appreciated.

    Thanks.

    deepbevel
    Member

    @deepbevel

    But I imagine you’d have to style each link in the html if you wanted each unique hover color to be the same as current.

    Yes, I realize that, but do you know how exactly I would target current menu item? You can take a look at my website if you know about css. http://www.researchverse.com, can you give me an example for targeting the home button. Then I should be able to use this info for other menu items.

    I am learning right now, so I have been trying different selectors to target the menu item, no luck so far.

Viewing 15 replies - 1 through 15 (of 39 total)
  • The topic ‘How to change hover color for each menu item individually’ is closed to new replies.