Jump to content
Sign in to follow this  
c0sie

How to remove main nav bar hover background and change text colour?

Recommended Posts

c0sie

Hi all, I have searched and tried all the replies found but so far none work as I need them to do. All I simply need to do is to remove the active background behind "home" and then remove the hover background when a page link is hovered over. Finally how do I change the text colour both for normal unhovered links and a hovered link within the nav bar at http://www.sherronculver.co.uk/? Thanks in advance :) Cris

Share this post


Link to post
Share on other sites
catrina
Changing the active background: [code]ul#menu-top-nav .main-nav li.current-menu-item {background-color: #COLORHERE;}[/code] Removing the hover background: [code]ul#menu-top-nav .main-nav li.menu-item a:hover {background-color: none;}[/code] Change text color for unhovered text link: [code]ul#menu-top-nav .main-nav li.menu-item a {color: #COLORHERE;}[/code] Change text color for hovered text link: [code]ul#menu-top-nav .main-nav li.menu-item a:hover {color: #COLORHERE;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
c0sie
Hi Catrina, thanks for your reply! I have tried all four of the lines of code above with a #ff0000 colour code to see the changes and it seems that none of them have worked. Is there any other option to change the colours at all? Thanks in advance, Cris

Share this post


Link to post
Share on other sites
catrina
The selectors may need to be adjusted. For the active background CSS selector, change to: #nav_row .main_nav li.current-menu-item

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
c0sie
Hi Catrina, I have had success with the following so far: .main-nav li.current_page_item a, .main-nav li.current-menu-item a { background: none; color: #5e95bb; } .main_nav li a:hover { background: none; } but cant seem to stop the hover over background. Any ideas at all? Thank you again :)

Share this post


Link to post
Share on other sites
Jenny
Have you tried [url="http://www.pagelines.com/store/plugins/simple-css-lite/"]Simple CSS Lite[/url]?

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×