Change Nav Menu – News Pro

[rogerp]

I want to change the Nav Menu on my news pro theme.

I want to make all the menu items have the same highlight colour of 273541

Then make he highlight colour 3CA6FE

Much the same as the studiopress site - and I also like the menu on http://www.gizmodo.co.uk/

Any tips / tutorials appreciated as I can't find the CSS to change it

Thanks
Roger

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

http://www.rogerperkin.co.uk

[Brad Dalton]

Try this http://wpsites.net/web-design/changing-the-primary-navigation-colors-in-studiopress-themes/

---

Tutorials for StudioPress Themes.

[rogerp]

Thanks for the tutorial - I have made these changes

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

.nav-primary {
border-bottom: 1px solid #000;
border-top: 1px solid #e3e3e3;
background-colour: #273541;
}
.nav-primary a {
color: #3CA6FE;

But nothing changed?

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[rogerp]

I am making progress but cannot find the setting to make the default background for all menu items not be white

Thanks

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[rogerp]

Ok found the problem - US / UK spelling!

background-colour: #273541;

Should be

background-color: #273541;

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[rogerp]

Now I would like to make the menu Bar half its height?

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[rogerp]

I have got there!

Here are all the changes I had to make

#273541 - Dark background
#3CA6FE - Light Blue highlight colour

Changes to make News Pro Header Menu Colours different

** Make Header Bar Dark Blue **

Site Header
---------------------------------------------------------------------------------------------------- */
/* RP - Change header colour to dark blue */
.site-header {
background-color: #273541;

** Make all Menu Items background default dark blue **

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

.nav-primary {
border-bottom: 1px solid #000;
border-top: 1px solid #e3e3e3;
background-color: #273541; <<<<<<<<<<<<<<<<<<<<<<<<
}
.nav-primary a {
color: #fff;
}

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

.nav-secondary {
border-bottom: 1px solid #e3e3e3;
background-color: #273541; <<<<<<<<<<<<<<<<<<<<<<<<<<
}

** Current Menu Item **

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

** Make Menu Half Height and text White **

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

.genesis-nav-menu {
clear: both;
color: #fff;
font-size: 14px;
font-size: 1.4rem;
font-weight: 700;
line-height: 0;
width: 100%;

You can see the new menu now at http://www.rogerperkin.co.uk

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[craigtech]

I am using the same Child Theme as RogerP, "News Pro", and have the same issues. I have been able to change certain colors in the navigation menu, while others are elusive. My specific problem is changing the primary text on the navigation menu from the default "BLACK" to "WHITE". My background color is a very dark blue. I have changed the "current page" navigation item to have a lighter blue color with white text

You can find my site here for a better explanation: Salem Public Library

I have combed through the forums, and watched several YouTube tutorials and cannot achieve the results that others have. At this point I'm beginning to think there is a bug somewhere. Here is what I've done so far:

• edited the styles in the editor to add color:#ffffff;
• Tried Genesis Extender (which helped with some of the color like a:visited
• Read through the documentation on Genesis and News Pro child theme

Any help would be appreciated. Thanks in advance.

[Brad Dalton]

Try

.menu-primary a {
    color:#ffffff!important;
}

---

Tutorials for StudioPress Themes.

[craigtech]

That's it, braddalton. Perfect. Thanks a million.

[Author]

Posts