Changing the colour of navigation bar on rollover.

bloomarttherapy · Member · Jan 11, 2015 at 4:55 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
staff-happychia · Staff · Jan 11, 2015 at 5:22 pm
Copy link
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?
bloomarttherapy · Member · Jan 11, 2015 at 5:43 pm
Copy link
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
bloomarttherapy · Member · Jan 11, 2015 at 5:47 pm
Copy link
I have changed it, you should now be able to see it.

Thanks
staff-happychia · Staff · Jan 11, 2015 at 6:23 pm
Copy link
(I am rushing to work and will get back to you with the CSS once I am back home in the evening.)
bloomarttherapy · Member · Jan 11, 2015 at 6:35 pm
Copy link
Thanks! It is evening here, I suppose you are talking to me from the other side of the world somewhere!
staff-happychia · Staff · Jan 11, 2015 at 6:38 pm
Copy link
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
staff-happychia · Staff · Jan 11, 2015 at 6:39 pm
Copy link
Yep, I am in Auckland, New Zealand :-)

I managed to quickly cook the style.
bloomarttherapy · Member · Jan 11, 2015 at 6:49 pm
Copy link
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!
staff-happychia · Staff · Jan 12, 2015 at 7:37 am
Copy link
Could you please enable access to your blog so I can try to come up with the required style.
bloomarttherapy · Member · Jan 12, 2015 at 9:25 am
Copy link
I’ve made the blog accessible so you should be able to look at it again.
Thank you
staff-happychia · Staff · Jan 12, 2015 at 5:55 pm
Copy link
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.
staff-happychia · Staff · Jan 13, 2015 at 8:39 am
Copy link
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.
designsimply · Member · Jan 18, 2015 at 7:45 pm
Copy link
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.

No items found.