Jump to content
Sign in to follow this  
jenniferlumpkins

Change Navigation Color

Recommended Posts

jenniferlumpkins

Ok, I have been going through some of the CSS tweaks already listed on the forum and have made adjustments to the nav menu; however, I can't seem to find the code to make the gray/transparent background to brown when you are on a current page. Can anyone help me with that? http://testsite.mariemediainc.com/

Share this post


Link to post
Share on other sites
catrina
The code would be this: [code]ul.main-nav li.current_page_item {background-color: #xxxxxx;}[/code] Replace the hex code for the one that creates brown.

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
jenniferlumpkins
I just tried that code and it still doesn't work. *sad face* Do you have any other suggestions for me Catrina?

Share this post


Link to post
Share on other sites
catrina
Try this instead: [code]ul.main-nav li.current-menu-item {background-color: #xxxxxx;}[/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
jenniferlumpkins
Nope, that didn't work either :(

Share this post


Link to post
Share on other sites
jenniferlumpkins
Here is the custom code that I have: .navigation_wrap {border-bottom: 0 none !important;} #nav { background-color: #301b03;} .main_nav li a { color: #FFF; } .main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover { background-color: #d29129 !important; color: #000000; } #nav .content-pad, #secondnav .content-pad { padding-bottom: 14px; padding-top: 14px; } ul.main-nav li.current-menu-item {background-color: #301b03;}

Share this post


Link to post
Share on other sites
Jenny
[code]ul.main-nav li.current-menu-item a { background-color: #D29129 !important; }[/code] Should work!

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
jenniferlumpkins
Ok that helped! Thank you mama :) Now the menu is doing something else wrong in regards to the drop down. If you are not on the service page and you roll over it or on any of the sub menu items, it still shows the gray color; however, when you are on the main menu service page it shows the golden background color correctly. Any idea why that is? (never thought making a simple drop down menu would require so much code...lol)

Share this post


Link to post
Share on other sites
kastelic
Try this: [code] .sub-menu a { background-color: #D29129 !important; } [/code]

Share this post


Link to post
Share on other sites
jenniferlumpkins
Jimmy, That helped! The only weird things that it's doing now is if you are on another page besides the services page and hover over services it looks fine until...you try to select an option from the sub menu then the services button changes back to gray.

Share this post


Link to post
Share on other sites
catrina
Hm, I'm not sure where that grey is coming from, but it's not coming from anything in the custom CSS you posted. Do you have any other custom CSS I haven't seen?

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
jenniferlumpkins
No, that's the only CSS that I have on there is for the nav button and for the line to be removed from underneath the nav bar

Share this post


Link to post
Share on other sites
jenniferlumpkins
.navigation_wrap {border-bottom: 0 none !important;} #nav { background-color: #301b03;} .main_nav li a { color: #FFF; } .main-nav li a:hover, .main-nav li.current-menu-ancestor ul a:hover { background-color: #d29129 !important; color: #000000;} #nav .content-pad, #secondnav .content-pad { padding-bottom: 14px; padding-top: 14px; } ul.main-nav li.current-menu-item a { background-color: #d29129 !important; color: #000000; } .sub-menu a { background-color: #D29129 !important; color: #000000; } ul.sub-menu li.current-menu-item a { background-color: #D29129 !important; color: #000000; }

Share this post


Link to post
Share on other sites
kastelic
This should do it: [code]ul.sf-menu li:hover{ background-color: #D29129 !important }[/code]

Share this post


Link to post
Share on other sites
jenniferlumpkins
Jimmy, That didn't work. I apologize if I am sending you in circles and I truly appreciate you taking the time to help me. I've been trying to use firebug to see if I could find something. Do you think this may have something to do with it:

Share this post


Link to post
Share on other sites
barbosa
Hi, I'm having a similar problem: [img]http://i40.tinypic.com/mlmkwm.jpg[/img] Any suggestions?

Share this post


Link to post
Share on other sites
Jenny
After a lot of digging, think I finally got it :) [code].main-nav li:hover { background: none repeat scroll 0 0 #D29129 !important; }[/code]

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
jenniferlumpkins
Oh no mama...that didn't work either :(

Share this post


Link to post
Share on other sites
Jenny
Where are you putting your custom code? Is the code I provided above still in your CSS? I would like to work with it to try to debug. It worked for me so I'm thinking a previous CSS callout you added may be interfering. Oh, here's an idea... move the CSS section I just provided in my previous post at the very top of your custom CSS. Order does matter so this will help make sure nothing is overwriting it.

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  

×