Magazine Pro – Secondary Menu colors

[carrie]

Hi - I'm trying to change the secondary menu to have a white background with black text. I figured out the #666 color (I made it grey for now so I could see the text color), but can't figure out how to change the text color to black and the green colors dividing the text and at the end.

Thanks,
Carrie

http://thebookkeeperssolution.com/

[frobn]

This should change the backgound-color.

.nav-secondary a,
.genesis-nav-menu {
    background-color: #000 !important;
}

[carrie]

Thanks, but that's what I already figured out how to do 🙂 I want to change the secondary menu text to black and the rest of it to white. Sorry if I'm not explaining myself correctly.

[frobn]

Swap the colors to any that you want.

.nav-secondary a,
.genesis-nav-menu {
    background-color: #fff !important;
    color: #000 !important;
}

[carrie]

It didn't work 🙁 I left it so you can see what it looks like. I think it might have something to do with the responsive menu? Maybe?

[frobn]

I tested it on firefox using Web Developer

Looking at your css !important is missing.

This what I see:

.nav-secondary a, .genesis-nav-menu
{
  background-color: #ffffff;
  color: #000000;
}

Try it this way:

.nav-secondary a,
.genesis-nav-menu {
    background-color: #fff !important;
    color: #000 !important;
}

[carrie]

Okay, this is weird because I can't find what you say you see as I pasted in exactly what you typed under the Secondary Menu area....

/* Secondary Navigation
--------------------------------------------- */

.nav-secondary .wrap {
border-bottom: 1px solid #fff;
}

.nav-secondary a,
.genesis-nav-menu {
background-color: #fff !important;
color: #000 !important;
}

Do you not see it? Could it be a plugin messing up what you see? I inherited this client so I'm not sure what was done previous to me and there is a Visual Composer plugin, etc. I'm wary of.

I did a Find on the code you said you see and it's not in the style.css file. I'm stumped. I'll go look again for this code you said you see.

[carrie]

Okay, I looked again and what you see isn't what I see - I see exactly what you told me to put in the css as per above. I should've put "didn't" find it above, it won't let me edit my message to you now 🙁

[frobn]

It's weird. I checked your style.css and found it ok but when I use Web Developer to check your code I see:

/* Line 1461 */
.nav-secondary a, .genesis-nav-menu
{
background-color: #ffffff;
color: #000000;
}

When I insert the code in via Web Developer it works perfectly.

A couple of things to try: Disable visual composer and if you are using genesis simple hooks try inserting the style before the </body> or in the <footer>.

[carrie]

That is weird. Disabling VC didn't do anything. I installed Genesis Simple Hooks but maybe I'm not putting it in the right spot?

[frobn]

In thinking about it it would probably be better to insert Genesis Theme Settings in the "Head and Footer Hooks.

I don't know if it will work but its worth a try.

<style>
<!--
  .nav-secondary a,
.genesis-nav-menu {
background-color: #fff !important;
color: #000 !important;
}
-->
</style>

If there is a conflict with one of your plugins then the inserting the style in the footer hook will load it after all other js and css is loaded.

[carrie]

It didn't work... here's a screenshot, it killed the primary menu;
http://www.thevirtualinch.ca/tvi/tbs-infooter.jpg

[frobn]

I ran out of suggestions. Something internal to the site is preventing the rendering of !important in your styles.

Found in your style sheet:

.header-image .site-title a {
	background-position: center !important;
	background-size: contain !important;
	float: left;
	display: block;
	min-height: 175px;
	text-indent: -9999px;
	width: 100%;
}

Viewed with Web Developer:

/* Line 1285 */
.header-image .site-title a
{
  background-position: center center;
  background-size: contain;
  float: left;
  display: block;
  min-height: 175px;
  text-indent: -9999px;
  width: 100%;
}

What happened to !important? My guess is that the problem lies with the wp editor. Even though you deactivated the visual editor it may have left something changed. I vaguely recall reading that an earlier version of wp had a problem with !important.

[Christoph]

Wow, your css is quite an adventure.
You have a lot of duplicate and conflicting css selectors.
I'd recommend you try to consolidate that.
Also relocate the three css selectors from the bottom of the style.css (after the last media query) to more fitting places in the style sheet.
It makes it easier to see them and you don't have to wonder why changes to the nav-menu don't take.

If you change the selector that frobn mentioned to

.nav-secondary .genesis-nav-menu {
    background-color: #666 !important;
    color: #000 !important;
}

it works for me.

The way the selector is now you are targeting the links in nav-secondary and the whole genesis-nav-menu, which will affect nav-primary.
If you change it to the above you are targeting .nav-secondary and the in the div nav-secondary "included" .genesis-nav-menu

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[carrie]

Thanks frobn, I'm going to run all this by a friend of mine on Monday - maybe she has some fresh ideas on this weirdness. I REALLY appreciate your help and thoughts about this issue. I'll post if I am able to resolve - have a great weekend!

[frobn]

It was an interesting journey, I wish was able to duplicate the problem, there is always a solution if you can dig deep enough. Please let me know if you find an answer.

@Chris

Your code is good, but solves a different problem. The solution calls for the background-color to be #fff and to accomplish that the background of .nav-secondary a needs to be #fff. That the code did not work was not that it was incorrect but that some how !important got stripped out or ignored. If you can figure out why you can solve the problem.

[Christoph]

I see. Seemed like you were talking about something different.
Is this what the result should look like?
http://screencast.com/t/4cZ1alyMS

Like I said before the css is quite adventurous.
The !importants from the end of the stylesheet have higher specificity than the !important on line 1461. That's why the changes would not take.
Targeting .genesis-nav-menu directly will cause more problems than it solves, if you want different styles for primary and secondary navigation.
It is better to use .nav-primary .genesis-nav-menu or .nav-secondary .genesis-nav-menu

Interestingly enough, to get the secondary menu to have a white background and black text doesn't involve .nav-secondary...

Remove background-color: #69813c from around line 2232 in .genesis-nav-menu

Remove color: #fff !important; from around line 2243 in .genesis-nav-menu a {

Completely remove .nav-secondary a, .genesis-nav-menu { starting around line 1461

Add

.nav-primary .genesis-nav-menu {
	background-color: #69813c;
}

.nav-primary .genesis-nav-menu a {
	color: white;
}

The color of the current menu item of nav-primary is set around line 1442 in

.nav-primary a:hover, .nav-primary .sub-menu a:hover, .nav-primary .genesis-nav-menu .current-menu-item > a {
    color: #E8554E;
}

The text color for .nav-secondary is coming from around line 1329.genesis-nav-menu a {
The background color is coming from around line 182 a {

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[frobn]

Chris as I said your code is good. There are different ways to approach a problem. You solved the problem by removing code which was excellent and yes it is better to remove the offending code. I was able to get the code to work using Web Developer but since I did not have access to the actual css and was limited and from what I could determine !important was being striped. Thank you solving the problem.

[Author]

Posts