Solved

How do I change this highlighted menu background?

Posted on 2013-12-19
7
348 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 52

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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Accepted Solution

by:
jtwcs earned 500 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 52

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change Firefox bookmarks menu font size 2 49
SMTP connect() failed - WordPress 6 53
Obsolete font tag need to convert to CSS 3 33
Level out logo and increase size? 16 24
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

740 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