Jump to content
Sign in to follow this  
onepace

Nav Bar Color Issue

Recommended Posts

onepace

URL: www.3dlaptopworld.com I hate to ask this again because I've asked a similar problem before (http://www.pagelines.com/forum/discussion/14548/nav-bar-changes-not-sticking#Item_7) I'm trying to make the nav bar black with white text and when hovered over white with black text. For some reason I can't get the menu items to change. Here is the CSS I have input, just like before: #primary-nav { background: #000000; } .main_nav .main-nav li a:hover { background: #FFFFFF; color: #000000 !important; } .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a { background: #000000; color: #FFFFFF; } #primary-nav li.page_item a {color: #FFFFFF; font-size: 13px; } .main_nav li a {color: #FFFFFF; } #branding{background:#212121 } I downloaded Firebug and spent about an hour trying to figure out what code I needed, but none of my changes worked. I think the problem has something to do with my front page being static. I tried changing main-nav to primary-nav and vice versa, just couldn't get it :(

Share this post


Link to post
Share on other sites
Danny
Hi Onepace, Check my post, the answer to your question is there. http://www.pagelines.com/forum/discussion/14766/most-commonly-asked-css-tweaks#Item_1 FYI, the issue I think is that you need to make the li transparent, try this code from my post. [code] /* THIS MAKES THE li BACKGROUNDS TRANSPARENT */ .sf-menu li, .main_nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color: transparent; } [/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
onepace
That worked, but for some reason the text color in the nav bar isn't staying white on all pages. Shouldn't this CSS force it to white: .main_nav li a {color: #FFFFFF; }

Share this post


Link to post
Share on other sites
catrina
I think the CSS selector needs to be different: [code]ul#menu-navigation li#menu-item[/code] instead of [code].main_li a[/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
onepace
Unfortunately that did not work. Here's what I tried: ul#menu-navigation li#menu-item {color: #FFFFFF; } I also tried: .main_nav ul a {color: #FFFFFF; } which didn't work either. Any other ideas?

Share this post


Link to post
Share on other sites
onepace
I figured it out! Haha, I can't believe I figured something out on my own! It was #primary-nav ul.main-nav li a { color: #FFFFFF; }

Share this post


Link to post
Share on other sites
Jenny
Glad you were able to figure it out! Congrats!

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
Danny
Hi Onepace, You could of actually used this: [code] .main_nav li a {color: #FFFFFF;} [/code] But it was missing the !important at the end, which was my mistake, thanks for pointing this out for me! :D

Please search our forums, before posting!

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  

×