Jump to content
Sign in to follow this  
apattee

Can't change Main Nav text color

Recommended Posts

apattee

Normally I find this stuff rather easy as I use firebug, but I can't figure this one out. I want to have the text in my main nav: #ffffff. I want the hover color of the background to be darker (keeping the text white.) I want the current page on the menu to remain that darker background. I can't even change the text color, so hopefully someone can help. Thanks.

Share this post


Link to post
Share on other sites
Rob
Did you use the Simple CSS Lite plugin (free in our Store), which allows you to change the font color of the menu?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
apattee
I did, in fact, and that didn't work either. It wouldn't change anything.

Share this post


Link to post
Share on other sites
batman
You can try to add CSS rules To change color text for example [code].navbar .navline > li > a {color:rgba(100,100,100,0.6); }[/code] For mouse hover [code].navbar .navline > li > a:hover, .navbar li.current-menu-item > a {color:rgba(100,100,100,0.9);}[/code] you can change 100,100,100 for the color as you like. you can change 0.9 for the transparency as you like. Simple CSS Lite only works on the standard navigation, not on all the navigation options.

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman
To change hover color of the background, you can try [code].dropdown-menu {background-color:rgba(100,100,100); }[/code] the same 100,100,100 the color as you like

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman
One more you can try modify [code].dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, #site .dropdown-menu .current-menu-item > a { color: rgb(100, 100, 100); text-decoration: none; background-color: rgb(100, 100, 100); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5); }[/code] For the drop menu.... ;)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
apattee
Great thank you. That worked. Two more questions: 1. Is it possible to place a line between the menu items? 2. Can I keep the parent menu item highlighted when a child page is active? For instance, on Why LePort, can that remain highlighted when on one of its subpages? Thanks again.

Share this post


Link to post
Share on other sites
batman
Hi again For the line between the menu you can try [code].navbar .navline > li > a {border-right: 1px solid #f1f1f1;}[/code] For the highlighted I don??t know, I??m a newbie who try to learn helping (with a bad English too, sorry) :)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
catrina
For the subpage highlight, it might be possible, but keep in mind that you'll need to make the same adjustment for every other subpage/child page you have (that will be a lot of CSS).

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
apattee
I'm okay with lots of css if it is possible. What would the correct code be?

Share this post


Link to post
Share on other sites
Danny
Hi, For the drop down menu add this CSS and change the value to your desired color. [code].dropdown-menu { background-color: white; border-color: #CCC; border-color: rgba(0, 0, 0, 0.2); border-style: solid; border-width: 1px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }[/code] Drop down hove use this code and change the values. [code].dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, #site .dropdown-menu .current-menu-item > a { color: white; text-decoration: none; background-color: #646464; text-shadow: 0px -1px 0px rgba(0, 0, 0, 1); }[/code]

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  

×