News Pro Navbar Color Confusion

[cathy52]

The site I'm working on for a friend is MyFrenchMen. I want to change the navigation bar color from white to black with a red hover. I've read quite a few other posts with instructions on how to do this but the code I see in the themes function file for this site, doesn't match the code I've seen in instructional posts. For example, below is the code I'm seeing for the primary and sub navigation.

/* Primary Navigation
--------------------------------------------- */

.nav-primary {
border-bottom: 1px solid #e3e3e3;
}

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

.nav-secondary {
border-bottom: 1px solid #e3e3e3;

I see no option to change the navbar colors or hover colors. I'm missing something! Would appreciate it if someone would point me to the proper code to change.

Thanks!

http://myfrenchmen.com/

[CleanPageDom]

Hi Cathy

Think you need to add:

/* Primary Navigation
——————————————— */

.nav-primary {
background-color: #000; /*add black to the background - currently there is no color set*/
border-bottom: 1px solid #e3e3e3;
}

/* Secondary Navigation
——————————————— */

.nav-secondary {
background-color: #000; /*add black to the background - currently there is no color set*/
border-bottom: 1px solid #e3e3e3;
}

Then you'll need to change, I think genesis-nav-menu a to have color: #fff;

Then find:

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

and change color to #ff0000.

Thanks
Dom

---

Let’s build a website together…

[cathy52]

Thanks Dom! I'll give it a try. Appreciate your help.

[cathy52]

Sorry, forgot one other thing. The code for changing navbar font to white. Where will I find that?

[CleanPageDom]

No problem. There might be an easier way, looking at it now. And you'll need to do something about the dropdowns:
.genesis-nav-menu .sub-menu a - change background-color: to #000;

Do you mean like this:

Dom

---

Let’s build a website together…

[CleanPageDom]

I'm not 100% familiar with the theme, but in Framework it's under "Site Navigation", in there is genesis-nav-menu a and beneath that is genesis-nav-menu a:hover.

---

Let’s build a website together…

[anotherusername]

Hi there, cathy52:

You are going to need to edit your style sheet.

Look for:

.genesis-nav-menu {
	clear: both;
 	color: #000;
	font-size: 12px;
	font-weight: 600;
/* --- changing from 1.3 down to 1.2 ------DW --- */
	line-height: 1.2;
	width: 100%;
}

and try changing the values in there to something like this:

.genesis-nav-menu {
	clear: both;
 	color: #fff;
	font-size: 12px;
	font-weight: 600;
/* --- changing from 1.3 down to 1.2 ------DW --- */
	line-height: 1.2;
	width: 100%;
	background-color: #000;
}

Then look for the following:

.genesis-nav-menu .sub-menu a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a {
 	background-color: #000;   
	color: #fff;        
}

and in that area change

background-color: #000;

instead to this

background-color: #cc0000;

If you want black text, change this part, too:

color: #fff;

instead to

color: #000;

Hope this helps.

~~~~~

P.S. You have lots of submenu stuff in there, so you will probably have to do something similar for the submenus.

PPS. Who is DW, and why did he stop working on the site?

[cathy52]

Okie Dokie, will see what I can get it to do. And yes, I've thought about the dropdowns. Still don't know where to find the code to change font color 🙂

I used to know what I was doing when working with a studiopress theme. That has all changed!

[cathy52]

DW is my friend. She stopped working on the site because she became frustrated. I hate the way she initials her changes. And the fact that she didn't copy and save the original code.

I appreciate your help.

[CleanPageDom]

It's all under Site Navigation, I think. All within this part of the style.css:

/*
Site Navigation
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {
	clear: both;
 	color: #000;
	font-size: 12px;
	font-weight: 600;
/* --- changing from 1.3 down to 1.2 ------DW --- */
	line-height: 1.2;
	width: 100%;
}

.genesis-nav-menu .menu-item {
	display: inline-block;
	text-align: center;
	margin-right: -4px;
}

.genesis-nav-menu a {
	border-right: 1px solid #e3e3e3;
 	color: #000;
	display: block;
	padding: 10px 24px;
	position: relative;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
	background-color: #000;         
	color: #fff;         
}

.genesis-nav-menu > .menu-item > a {
	text-transform: uppercase;
}

.genesis-nav-menu .sub-menu {
	border-top: 1px solid #e3e3e3;	
	left: -9999px;
	opacity: 0;
	position: absolute;
	-webkit-transition: opacity .4s ease-in-out;
	-moz-transition:    opacity .4s ease-in-out;
	-ms-transition:     opacity .4s ease-in-out;
	-o-transition:      opacity .4s ease-in-out;
	transition:         opacity .4s ease-in-out;
	width: 200px;
	z-index: 99;
}

.genesis-nav-menu .sub-menu a {
 	background-color: #fff;   
        border: 1px solid #e3e3e3;
	border-top: none;
	padding: 12px 24px;
	position: relative;
/* --- DW --- adding two following lines; width was already here. ---- */
        text-align: left;
        font-size: 12px;
	width: 200px;
}

.genesis-nav-menu .sub-menu a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a {
 	background-color: #000;   
	color: #fff;        
}

Had me worried for a sec. My initials are DW, and I definitely haven't been tampering with your site! 🙂

---

Let’s build a website together…

[cathy52]

I would rather you had tampered with it than her! You know, whey you say, "I think" I get a bit nervous.

[CleanPageDom]

Ha ha. Sorry. What I mean by that is up until recently I've only used Framework to build sites, so I'm not familiar with the terminology in the other Studiopress themes. But I checked out the style.css file on your site and it is definitely under Site Navigation, just as in Framework, as I copied above.

Thanks
Dom

---

Let’s build a website together…

[cathy52]

Thanks for the reassurance. 🙂 Wish me luck, I'm going in!

[anotherusername]

Good luck.

The worst that could happen is that you learn how to do it right!

Actually, DW did a pretty good job of commenting what the changes were (as far as I could tell with a quick glance.)

If you want the original code, then look at the original file (you should be able to re-download the theme on your local computer, then you can view the original style.css file).

Then, use a program like notepad++ (on windows) and install the compare plugin. That will allow you to compare the original file with the modified file side by side. It highlights all the differences.

I hope this helps. Let us know how you make out with it.

[anotherusername]

She stopped working on the site because she became frustrated.

Hmmm... best to have a plan in advance to avoid getting frustrated, too...

Sometimes it is the client / friend who is causing the frustration.

[CleanPageDom]

Exactly. CSS is kind and doesn't judge you. Worst you can do is undo what you did. Now, if we were dealing with functions.php, that's another story. One misplaced comma and BANG! White screen of death.

Good luck.

---

Let’s build a website together…

[cathy52]

I like your attitude! And, I am learning. I've always made copies of the original code and then a copy of the changes I made to the original code to compare. For me, that is easier than going through code and looking for initials. I don't know who is more anal, my friend or me.

I managed to make the changes I wanted to the primary navigation. Now the secondary navigation is a bit wonky. The "home, about" and such aren't showing with a white background with black text any longer. Will get that figured out though. Now that I know my way around a bit better.

Thanks again for your help.

[CleanPageDom]

I see what you mean. You can either search for .nav-secondary - it's a little below Site Navigation, under Secondary Navigation, or, and this is the quicker way that I mentioned earlier, you can add background-color: #000; to .genesis-nav-menu, and this should change the background on both Primary and Secondary.

You're certainly a lot more organised than me with your changes. I just ride roughshod over everything.

---

Let’s build a website together…

[cathy52]

If I had enough experience and confidence I'd ride roughshod also. I'm going to try adding the background color change as you suggested. Going to quick route first. But a break is needed before I do anything else.

Thanks!

[Author]

Posts