?
Solved

How do I change this highlighted menu background?

Posted on 2013-12-19
7
Medium Priority
?
357 Views
Last Modified: 2013-12-19
I have a site here:

http://robinsonlawillinois.com/

And I am trying to find in the css where I can change the background color of the highlighted menu (in this example the HOME)?

Any help is appreciated.
0
Comment
Question by:Donnie Walker
  • 3
  • 2
  • 2
7 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39730037
In color.css

.sf-menu > li:hover, .sf-menu > li.current-menu-item , .sf-menu > li.current_page_item , .sf-menu > li.current-menu-ancestor , .sf-menu > li.current-menu-parent , .sf-menu > li.current_page_ancestor , .sf-menu > li.current_page_parent {
	background:#f16d3c;
	-moz-box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
	-webkit-box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
	box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
	}

Open in new window


and on the page inside of the style tags
	.sf-menu > li:hover, .sf-menu > li.current-menu-item , .sf-menu > li.current_page_item , .sf-menu > li.current-menu-ancestor , .sf-menu > li.current-menu-parent , .sf-menu > li.current_page_ancestor , .sf-menu > li.current_page_parent, .sf-menu li li:hover, .sf-menu li li.current{background-color:#011161}

Open in new window

0
 

Author Comment

by:Donnie Walker
ID: 39730069
I changed it in color.css but it is still not right.

There is some sort of gradient in the menu and I'm wanting a solid color.
0
 
LVL 10

Expert Comment

by:jtwcs
ID: 39730075
The sub navigation also has the same styles being applied.  Also found in color.css

/* dropdown */
.sf-menu li li{ border-bottom:1px solid #fff}
.sf-menu li li a{color:#4a4a4a;}
.sf-menu li li:hover, .sf-menu li li.current{
	background:#f16d3c;
	-moz-box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
	-webkit-box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
	box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
	color:#fff;
	}

Open in new window

0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
LVL 10

Accepted Solution

by:
jtwcs earned 2000 total points
ID: 39730081
The "gradient" is the box-shadow being applied.  Remove those declarations and you will be left with the solid color.

	-moz-box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
	-webkit-box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
	box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
	color:#fff;

Open in new window

0
 

Author Comment

by:Donnie Walker
ID: 39730084
I changed all references to f16d3c to 011161.

It still has the gradient.
0
 

Author Closing Comment

by:Donnie Walker
ID: 39730091
Thank you!
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39730101
You have colors set for the nav in colors.css on line 39 and 80 and then again on the page.  

If you are trying to modify a theme, it is best to create a custom css that is below the theme's css and make your adjustments there.  Avoid adding styles to the page header otherwise you have to update each page if the style is meant for every page.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month3 days, 21 hours left to enroll

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question