Changing the colour of navigation bar on rollover.

  • Author
    Posts
  • #2212407

    Hi,
    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?

    Thanks

    The blog I need help with is bloomartpsycotherapy.com.

    #2212502

    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?

    #2212505

    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?

    Thanks

    #2212507

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

    Thanks

    #2212522

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

    #2212527

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

    #2212528

    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

    #2212530

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

    I managed to quickly cook the style.

    #2212535

    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!

    #2212646

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

    #2212647

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

    #2212669

    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.

    #2212721

    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.

    #2212826

    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.