Jump to content
Sign in to follow this  
compartmentlife

Design Control Problem - Page Background Color changing Menu Background

Recommended Posts

compartmentlife

site: http://www.modernfitness.org/wordpress I am trying to make the menu transparent, but the "Page Background Color" keeps overriding any custom CSS that I write. I have done this with other sites, but this one is fighting me. I've even had to resort to adding the BODY tag to several lines of code or else they were ignored... Here is the code for the menu: body #primary-nav .main-nav a { color:#000000; background: transparent; font-weight: bold; text-transform: lowercase; } I have also tried specifying each menu item individually as follows, but that is not working either. body #primary-nav .main-nav li.menu-item-34 a { color:#000000; background:transparent; font-weight:bold; text-transform: lowercase; } On a separate note, why does the page background color have anything to do with the menu background? This is counter intuitive if someone wants to use a background as I am...

Share this post


Link to post
Share on other sites
kastelic

Hi, does this work for you?

	body #nav_row ul li {background:transparent}
	

Share this post


Link to post
Share on other sites
kastelic

Oh sorry, change to this to only target top level menu items:

body #nav_row>ul>li {background:transparent}

Share this post


Link to post
Share on other sites
compartmentlife

That worked better, but it still overrides my mouse overs. Any idea how to keep those working?

Share this post


Link to post
Share on other sites
bryan-hadaway

After; `body #nav_row>ul>li {background:transparent}` put: `body #nav_row>ul>li:hover {background:#fff}` Thanks, Bryan

Share this post


Link to post
Share on other sites
compartmentlife

Alright... Well, that works for the background, but not the font color. This is what I have: body #nav_row>ul>li:hover { color:#ffffff; background:#ad0f0f; }

Share this post


Link to post
Share on other sites
bryan-hadaway

It wouldn't. `body #nav_row>ul>li a:hover{color:#fff}` ^add in addition. Thanks, Bryan

Share this post


Link to post
Share on other sites
compartmentlife

That did not change anything.

Share this post


Link to post
Share on other sites
Andrew

Hey Matt, Are you running Firebug? If so, try out some rules from that interface until you see what you want. Know how to do that?

Share this post


Link to post
Share on other sites
compartmentlife

Yes, I am. Normally I can just copy code from what I want to modify, paste it into the custom code box with my changes and voila... For this site however, it seems to be ignoring a lot of my changes. I was able to modify my mouseover's really easy, but it would not let me set the primary nav bar to transparent without changing the page background also. Then, when I used the code mentioned above, it has totally negated any HOVER commands. I'm close now, but I just cannot seem to get it to HOVER with white text rather than black.

Share this post


Link to post
Share on other sites
cmunns

It can definitely get tricky...here's one step closer: ` body #primary-nav ul li a:hover.sf-with-ul { color:#FFF; } `

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  

×