Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How do I change this highlighted menu background?

Posted on 2013-12-19
7
Medium Priority
?
356 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
Independent Software Vendors: 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 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
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…
Suggested Courses

876 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