Jump to content
Sign in to follow this  
mikeoconnell79

Changing Color of One Tab in Nav Menu

Recommended Posts

mikeoconnell79

Is there a way to change the color of just one of the tabs in the Nav menu? Right now they are all grey but I need to make one of them blue. Could you help? Thanks!

Share this post


Link to post
Share on other sites
cmunns

Michael, Let's do it with CSS. Can I get a link to your site?

Share this post


Link to post
Share on other sites
mikeoconnell79

Michael, sorry for the delay. I was out of town for a few days. The link to my site is: http://www.sparkbrs.com the tab that I would want a different color is the one that says Service Pros. Thanks for your help.

Share this post


Link to post
Share on other sites
bryan-hadaway

I'm not sure whether you mean the text or the color of the tab, so I'll give you both; add one or the other to Custom CSS: Text: `#menu-item-304 a{color:#555}` OR Tab: `#menu-item-304 a{background:#555}` Change 555 to whatever color code you want to use. Thanks, Bryan

Share this post


Link to post
Share on other sites
mikeoconnell79

Thanks Bryan. It's looking better. Now is it possible to make the text color of the blue box to be white, and can the mouse over color of the sub menu be blue also (right now it's black)? I think that would make the text easier to read against the blue tab, and the mouse over color would better match the tab. Thanks in advance.

Share this post


Link to post
Share on other sites
bryan-hadaway

Update over the last code I gave you to this complete code: ` #menu-item-304 a, #menu-item-304 sub-menu li a{ color:#fff; background:#blue; text-shadow:none} ` Change blue back to your blue color code. Thanks, Bryan

Share this post


Link to post
Share on other sites
mikeoconnell79

Thanks for the code Bryan but it didn't seem to work. The tab is still blue but the text is black and the hover over is still black also. It seems like it should work though.

Share this post


Link to post
Share on other sites
cmunns

The code is fine. You just need to add it to your THEME OPTIONS > CUSTOM CODE > CUSTOM CSS area so that none of the other stylesheets over-ride it, which is what's happening now

Share this post


Link to post
Share on other sites
mikeoconnell79

This is what's in my Custom CSS area. What should I remove? Thanks! body{} #cred {display:none;} #menu-item-304 a, #menu-item-304 sub-menu li a{ color:#fff; background:#3A53A3; text-shadow:none}

Share this post


Link to post
Share on other sites
cmunns

You're missing a semi-colon after the "none" Also, I believe it should be `.menu` not `#menu`

Share this post


Link to post
Share on other sites
mikeoconnell79

Hi, Here is the code with your revisions. Still no change on the display though. This is puzzling. body{} #cred {display:none;} .menu-item-304 a, .menu-item-304 sub-menu li a{ color:#fff; background:#3A53A3; text-shadow:none;}

Share this post


Link to post
Share on other sites
mikeoconnell79

Could it be that the dropdown.css comes after the custom css code?

Share this post


Link to post
Share on other sites
bryan-hadaway

Take my original code and update it to this: ` #menu-item-304 a, #menu-item-304 .sub-menu li a{ color:#fff !important; background:#3A53A3 !important; text-shadow:none !important} ` Of course placing it in Custom CSS again. If it still doesn't work than we know for sure the code is erroneous. Thanks, Bryan

Share this post


Link to post
Share on other sites
mikeoconnell79

Bryan, thank you. That fixed it for the most part. It gave me a few more options to make the appearance better.

Share this post


Link to post
Share on other sites
cmunns
Could it be that the dropdown.css comes after the custom css code?
Yes..if dropdown.css is the last thing loaded then it's going to take precedence unless you are more specific with your selectors. However, copying css into the custom code area should place it dead last in the header. Bryan provided you with a work around but generally speaking you want to avoid using the `!important` declaration as it really is bad practice.

Share this post


Link to post
Share on other sites
mikeoconnell79

Seems like the !important was the only way to get it working. I've haven't changed the template so I'm not sure why the original code wouldn't work without the !important code added. The custom CSS seems to be around line 35 in the source code. That seems pretty much above most of the code.

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  

×