?
Solved

How do I change this highlighted menu background?

Posted on 2013-12-19
7
Medium Priority
?
355 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 53

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
Technology Partners: 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 53

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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
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 set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
Suggested Courses

719 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