Custom Navigation Tab CSS

[logansquarist]

I am trying to customize the CSS for a specific Navigation header and subnav. I've been able to create a custom css class ".highlight" that changes the link and hover colors for the primary navigation bar header. I haven't been able to figure out, when on the actual page, how to change the font color to black. I'd like the background color to remain the blue. Any help would be most appreciated. Thanks!

http://logansquarist.com/for-businesses/

[Christoph]

Hi,

around line 4462 of the style.css you have the following block of code:

.magazine-pro-blue a:hover, .magazine-pro-blue .entry-content a, .magazine-pro-blue .entry-title a:hover, .magazine-pro-blue .genesis-nav-menu a:hover, .magazine-pro-blue .genesis-nav-menu .current-menu-item > a, .magazine-pro-blue .genesis-nav-menu .sub-menu .current-menu-item > a:hover, .magazine-pro-blue .nav-primary a:hover, .magazine-pro-blue .nav-primary .sub-menu a:hover, .magazine-pro-blue .nav-primary .genesis-nav-menu .current-menu-item > a {
    color: #469BD1;
}

Remove the last selector (.magazine-pro-blue .nav-primary .genesis-nav-menu .current-menu-item > a Make sure to also delete the , in front of it ) and
add it on its own (without the comma)

.magazine-pro-blue .nav-primary .genesis-nav-menu .current-menu-item > a {
	color: #000;
}

Alternatively, you could also add !important to .nav-primary .highlight a like so:

.nav-primary .highlight a {
    background-color: #469BD1;
    color: #000 !important;
}

---

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

[logansquarist]

Hi there, thanks for this! If I add the following:

.magazine-pro-blue .genesis-nav-menu .current-menu-item > a {
	color: #000 !important;
}

.magazine-pro-blue .nav-primary .genesis-nav-menu .current-menu-item > a {
	color: #000 !important;
}

.magazine-pro-blue .genesis-nav-menu .sub-menu .current-menu-item > a {
	color: #469bd1 !important;
}

I'm able to get the For Businesses tab to be correct. However, then the rest of the primary navigation is affected by the CSS, making the current page a styling to be black (and unreadable). Is it possible to customize the .highlight class further? I tried:

.nav-primary .highlight a {
    background-color: #469BD1;
    color: #000 !important;
}

which unfortunately didn't work.

To recap what I'm hoping for this custom primary navigation section:
link: background-color: #469BD1, color: #fff
a:hover: background-color: #469BD1, color: #000
current page: background-color: #469BD1, color: #000

The subnavigation can maintain existing CSS styling.

Thanks for the help -- such a simple switch seems to be far more complex than I thought.

[logansquarist]

Any other ideas here? My last modification is for the primary navigation current menu item a font color to be black, without affecting the rest of the navigation CSS. Any insight would be great. Thanks!

[Christoph]

Hi,

as far as I can see the new highlight class only applies to "For Business" right now.

I´d recommend to not use that class and to further separate the css classes.

I´m not sure what you mean by link. Do you mean all the "regular" menu items?

.magazine-pro-blue .genesis-nav-menu a:hover,
.magazine-pro-blue .genesis-nav-menu .sub-menu a:hover {
color: #000;
background-color:  #469BD1;
}

.magazine-pro-blue .nav-primary .genesis-nav-menu .current-menu-item > a {
	color: #000;
background-color: #469BD1;
}

On a side note, you have a lot of duplicate css in your style sheet. You might want to spend some time consolidating.

---

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

[logansquarist]

Christoph,

That's correct, highlight only applies to "For Businesses," however, I can't seem to change the link color font for when you're actually on the For Businesses page (http://logansquarist.com/for-businesses/). When you are, the other CSS styles take over, making the font the default blue. I would like it to be black, so it's readable.

If I change the CSS of current-menu-item, all the rest of the navigation is affected, in addition to For Businesses, changing the link color to black, and thus unreadable on the black background of the rest of the navigation (and subnavigation).

The CSS stylesheet is a bit wonky -- I have only added to it as needed. It's the default CSS from the Magazine Pro theme. Good note though. I'll try to get to that.

Again thanks -- hard nut to crack here.

[Christoph]

The css I posted above will do exactly what you want, when you comment out or delete the hightlight class.
http://screencast.com/t/MZvIo0MW

Your style sheet has about twice as many lines as the original...

---

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

[Author]

Posts