Solved

How do I change this highlighted menu background?

Posted on 2013-12-19
7
345 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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
is this a cms? 8 60
help squeezing some space out in this site 9 34
Border and image sizing 5 20
filter portfolio grid display on page load (wordpress) 7 20
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…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

823 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