Changing the colour of navigation bar on rollover.

  • Author
  • #2212407

    I wondered if anyone on here can help me, I’m trying to change the colour of the text in the navigation bar when it the mouse rolls over it, and I’ve got it working by using this code, but the problem is i need to be able to make each page have a different text colour, e.g., home is pink on roll over, contact us, green, at the moment they all come up orange,

    #masthead .main-navigation a:hover {
    font-weight: 700;
    color: #FB9633;

    Is there something i need to add to this to make it work?


    The blog I need help with is


    We can do it by specifying the hover for each menu item. We need to know the menu item html class to be able to this.

    Can you make your blog public so I can give you the exact CSS to use?


    What is the best way to do that, as i only want to publish it so you can take a look then take it back to private again for now until its done?



    I have changed it, you should now be able to see it.



    (I am rushing to work and will get back to you with the CSS once I am back home in the evening.)


    Thanks! It is evening here, I suppose you are talking to me from the other side of the world somewhere!


    Please repeat this style with menu-item-119 and color replaced:

    #masthead .main-navigation ul li#menu-item-119 a:hover {
        font-weight: 700;
        color: red;

    menu-item-119 is Home
    menu-item-121 is About
    menu-item-123 is Services
    menu-item-129 is Testimonial
    menu-item-133 is Contact Us


    Yep, I am in Auckland, New Zealand :-)

    I managed to quickly cook the style.


    Thanks so much, thats perfect, I just need to pick the colours now!

    I do have another question too, but there is no rush to reply if you are off to work,

    I just wondered if its possible to change the length of the border
    below the navigation bar, I’ve currently got my header image set to a white background that goes over the border creating the effect that i want, but you can see on the homepage where the header image is missing that it goes all the way along. Visually i think it looks okay, but when you view it on a mobile the white box is covering the menu bar.

    Thank you so much for your help, I really need to learn how to do css properly!


    Could you please enable access to your blog so I can try to come up with the required style.


    I’ve made the blog accessible so you should be able to look at it again.
    Thank you


    Sorry I did not get a chance this morning to work on this. I will get back to you in the evening unless some other volunteer helps you by then.


    Seems you have enabled Mobile Theme. Could you please go to Appearance > Mobile screen in your Dashboard and set Enable mobile theme to No.

    This will load the responsive theme to load in the first instance in the mobile with Menu button above the logo. Currently, with Mobile Theme on, it is loading the mobile site which has two logos and menu dropdown at the upper right corner of the mobile screen.

    Let me know if this helps.


    I just wondered if its possible to change the length of the border below the navigation bar

    The menu is based on an HTML list (the “ul” tag). Changing the width of that list container will effectively adjust the width of the border on it.

    Right now, the width is set to 100% for the menu. To remove that width setting for just the home page, you could add the following to your Appearance > Customize > CSS editor which will also work to center the main menu there:

    .home .main-navigation ul.nav-menu {
    	width: auto;

    I think it looks nicer centered.

The topic ‘Changing the colour of navigation bar on rollover.’ is closed to new replies.