WordPress.org

Ready to get started?Download WordPress

Forums

How to change hover color for each menu item individually (40 posts)

  1. radio jockey
    Member
    Posted 2 years ago #

    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.

  2. Johnb81
    Member
    Posted 2 years ago #

    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 {}

  3. radio jockey
    Member
    Posted 2 years ago #

    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

  4. it5
    Member
    Posted 2 years ago #

    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;
    }
  5. deepbevel
    Member
    Posted 2 years ago #

    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..?

  6. radio jockey
    Member
    Posted 2 years ago #

    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. :D

  7. deepbevel
    Member
    Posted 2 years ago #

    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.

  8. deepbevel
    Member
    Posted 2 years ago #

    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?

  9. it5
    Member
    Posted 2 years ago #

    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.

  10. deepbevel
    Member
    Posted 2 years ago #

    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!

  11. radio jockey
    Member
    Posted 2 years ago #

    Thanks a lot it5. This is awesome!!1

  12. radio jockey
    Member
    Posted 2 years ago #

    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;

  13. deepbevel
    Member
    Posted 2 years ago #

    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?

  14. radio jockey
    Member
    Posted 2 years ago #

    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.

  15. deepbevel
    Member
    Posted 2 years ago #

    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.

  16. radio jockey
    Member
    Posted 2 years ago #

    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.

  17. deepbevel
    Member
    Posted 2 years ago #

    wouldn't it look something like this?

    <ul>
    <li class="red"><a href="http://www.yoursite.com">home</a>
    #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: #same as hover);
    }
    
    </li>
    <li class="green"><a href="http://www.yoursite.com/about_us">about us</a>
    #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: #same as hover );
    }

    ect.

    and then add the css for each as well?

  18. deepbevel
    Member
    Posted 2 years ago #

    I'm probably no better with this than you, I could figure it out but it would involve a lengthly thread. I'll leave you to more capable hands. Good Luck!

  19. radio jockey
    Member
    Posted 2 years ago #

    Thanks a lot deepbevel for trying to help. I tried the css you posted above but no luck :D

    I am gonna keep trying and see if I can figure this out. I appreciate you trying.

  20. deepbevel
    Member
    Posted 2 years ago #

    your welcome, I'm trying to learn this too. Just to be clear, I posted html, not css. Also, I don't expect my syntax is correct, maybe the </a> should be at the end?. And "same as hover" would have to be replaced with the color number.
    anyway, carry on!

  21. it5
    Member
    Posted 2 years ago #

    go to your custom html menu and change the class of one of the menu items to one of these:

    class="current-menu-item-red"

    or

    class="current-menu-item-green"

    or

    class="current-menu-item-blue"

    for example, your menu code would be this if you were on the homepage:

    <ul>
    <li class="current-menu-item-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 replace the css i gave you with this:

    #access .red a:hover{
    color: #ffffff;
    background: #ff0000;
    }
    
    #access .green a:hover{
    color: #ffffff;
    background: #00ff00;
    }
    
    #access .blue a:hover{
    color: #ffffff;
    background: #0000ff;
    }
    
    #access .current-menu-item-red a{
    color: #ffffff;
    background: #ff0000;
    }
    
    #access .current-menu-item-green a{
    color: #ffffff;
    background: #00ff00;
    
    }
    #access .current-menu-item-blue a{
    color: #ffffff;
    background: #0000ff;
    }

    This works, but we'll need to figure out a way for you to be able to customize this menu for each page you create. Having this code in the header will be the default for every page. We should try moving the menu code to a page template file rather than the header. That way we can duplicate that template page, rename it, then use a separate version of it for each unique page you want to have. Its quite a bit of work to have pretty menu colours, but im sure it is worth it ;)

    deepbevel, I believe you used both html and css in your code example, which isnt allowed unless you wrap the css in <style></style> tags and put this between the <head></head> tags. The css doesnt need to be placed amongst the html, it works remotely by name.

  22. it5
    Member
    Posted 2 years ago #

    just had another little play around, and rather than put the custom menu code in a php template file for each page, you can simply stick it in your wordpress page content editor and then use css to position it at the top.

    so add extra code to the #access div in the css file to position how you want, something like:

    z-index: 10000;
    position: relative;
    top: -550px;
    left: 150px;

    (you might need to adjust this for your template, or wrap it inside a fixed position div to keep it from moving).

    then every new page you create in wordpress, just add this code at the start and change the class of the current page to the relevant 'current-menu-item-color':

    <div id="access">
    <ul>
    <li class="current-menu-item-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>
    </div>

    and there you go!

    A menu that can still be edited using the wordpress editor, whilst having all the fancy menu colours. Its not dynamic, but its still cool!

    you can see it working here (although its not fixed into position properly): twenty eleven here: http://www.ourdiana.com

  23. radio jockey
    Member
    Posted 2 years ago #

    hello it5,

    what do you mean by "you can simply stick it in your wordpress page content editor "? Is it something inside of wordpress?

    "then every new page you create in wordpress, just add this code at the start and change the class of the current page", also for this do you mean add this to the template file or in the page somewhere? where exactly should I add this?

    Thanks a lot.

    Have a good day.

  24. it5
    Member
    Posted 2 years ago #

    Hi radio jockey,

    One of the key features of wordpress is that you can create new pages and edit the content of those pages using the admin section of your wordpress site, accessible by going to http://www.yoursite.com/wp-login.php

    Login in, then go to 'pages' on the left menu, then edit the relevant page or set up a new page. When editing the page content there is a 'html' option. This is where you would put the code:

    <div id="access">
    <ul>
    <li class="current-menu-item-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>
    </div>

    Then, in the 'about us' page content (using the wordpress editor like above), you would put:

    <div id="access">
    <ul>
    <li class="red"><a href="http://www.yoursite.com">home</a></li>
    <li class="current-menu-item-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>
    </div>

    because this will make the green tab active instead of the red one.

    You would have to make a similar change to every new page you want to introduce to set the correct tab active.

  25. radio jockey
    Member
    Posted 2 years ago #

    sorry to write again. I tried the above steps like you said but it hasn't worked for me so far. I will try to explain exactly what I have done and may be that way you can help me better.

    1. I have this code in header.php file

    <ul>
    <li class="menu1"><a href="http://www.researchverse.com">home</a></li>
    <li class="menu2"><a href="http://www.researchverse.com/r-review">R-review</a></li>
    <li class="menu3"><a href="http://www.researchverse.com/recent-publications">Recent-Publications</a></li>
    <li class="menu4"><a href="http://www.researchverse.com/protocols">Protocols</a></li>
    <li class="menu5"><a href="http://www.researchverse.com/forums">Forums</a></li>
    				</ul>

    2. This is what I put inside "R-review" page in the html editor section.

    <div id="access">
    <ul>
    <li class="menu1"><a href="http://www.researchverse.com">home</a></li>
    <li class="current-menu-item-menu2"><a href="http://www.researchverse.com/r-review">R-review</a></li>
    <li class="menu3"><a href="http://www.researchverse.com/recent-publications">Recent-Publications</a></li>
    <li class="menu4"><a href="http://www.researchverse.com/protocols">Protocols</a></li>
    <li class="menu5"><a href="http://www.researchverse.com/forums">Forums</a></li>
    </ul>
    </div>

    likewise, for recent publications, I put,

    <div id="access">
    
    <ul>
    <li class="menu1"><a href="http://www.researchverse.com">home</a>
    <li class="menu2"><a href="http://www.researchverse.com/r-review">R-review</a>
    <li class="current-menu-item-menu3"><a href="http://www.researchverse.com/recent-publications">Recent-Publications</a>
    <li class="menu4"><a href="http://www.researchverse.com/protocols">Protocols</a>
    <li class="menu5"><a href="http://www.researchverse.com/forums">Forums</a>
    </ul>
    </div>

    3. Finally, this is what I have in the style.css
    [CSS moderated as per the Forum Rules. Please just post a link to your site.]

    Doing this changes the color of the menu items when I hover over them, but once I click on them, the current menu item isn't highlighted.

    Also my home page is created automatically I think. I don't have a "home" page under "page menu". To show it on the website, I just entered the web address on the "menu tab" under "Appearance menu" in wordpress.

    Thanks a lot again for your time.

  26. it5
    Member
    Posted 2 years ago #

    ok, delete that code in your header, then it should work.

    your menu might disappear from your homepage, but you can test if it has worked by going straight to your second page here, which will have the menu embedded in the content: http://www.researchverse.com/r-review/

    setup a new 'home' page that you can control like the other pages and set that as the default by changing its order appearance to '0'. Dont forget to add the menu code like you have done for the other pages.

    You'll have to fiddle with the #access css to position the embedded menu to where the original one was.

  27. radio jockey
    Member
    Posted 2 years ago #

    I don't know man, the entire menu disappeared now on all pages. if I put the code back on header.php, it reappears.

    Do you think you could take a look if I made you a admin login?

    Also, I created a new homepage, so home is now http://www.researchverse.com/home instead of just http://www.researchverse.com. Is there a way to fix this?

    I guess it's just some code editing somewhere in one of these 3 places you put the code, but with my limited css knowledge, i haven't been able to figure this out.

    Also do you have to put this code back in the header.php file? We deleted it yesterday from the header file.

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

  28. it5
    Member
    Posted 2 years ago #

    hmm, that is strange..

    and you definitely put the menu code in using the html tab and clicked 'update'?

    I noticed that when you put the menu code in, your website expanded to the right, as if the menu was there but hidden out of view.

    Maybe you could try using the following css in the #access div in case it is hiding behind the website:

    z-index: 10000;

    leave that dynamic code out of the header file, you wont need that (unless your happy to go back to how it was without the active tab colour)

    email me you login if you want me to take a look, but im sure you have done what was asked.

    I'll have another try from scratch and email you some working files

  29. deepbevel
    Member
    Posted 2 years ago #

    the menu won't appear on a non-static page, may have to add this most recent code to your loop as well as category, archive, ect. those pages are not created in the page editor, so they don't get the code. I lke the first method better, easier to just add new code , in the header, one time for each new page. no?

  30. radio jockey
    Member
    Posted 2 years ago #

    can you give me your email?

Topic Closed

This topic has been closed to new replies.

About this Topic