Change color of inactive text in menus

PhotoMatt · September 14, 2015

A need some help changing the text color of the inactive pages of my main menu. I have two menus. But when I'm on the sub menu I don't want the parent link to the sub menu to change. I've attached a sample pic of what I want it to look like.

http://www.mattedesignphotos.com/People

Thanks for any help you can offer.

PhotoMatt · September 15, 2015

Change color of inactive text in menus
A need some help changing the text color of the inactive pages of my main menu. I have two menus. But when I'm on the sub menu I don't want the parent link to the sub menu to change. I've attached a sample pic of what I want it to look like.

http://www.mattedesignphotos.com/People

Thanks for any help.

Hikin' Mike · September 15, 2015

Try this:

		/* Active */	
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a, a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-item .sm-page-widget-nav-activepage > a {
	color: red;
	}		
	
	/* Inactive */
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after {
	color: gray;
	}

PhotoMatt · September 17, 2015

Thank you Mike for your reply. I tried inserting the entire code into the "Entire Site" CSS but it didn't work. Actually, only the active pages worked. I also inserted the /* Inactive*/ into one of the "Just This Page" but that didn't work either. I'm probably doing something wrong.

Hikin' Mike · September 17, 2015

PhotoMatt wrote: »

Thank you Mike for your reply. I tried inserting the entire code into the "Entire Site" CSS but it didn't work. Actually, only the active pages worked. I also inserted the /* Inactive*/ into one of the "Just This Page" but that didn't work either. I'm probably doing something wrong.

It could be that you are using a different theme that I'm using. While I wanted the current directory/folder/gallery to be the same color, this is working on my site...

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-item .sm-page-widget-nav-activepage > a {
    color: #8c714f;
    }

It might be easier to see your site when you change over to the new Smugmug.

PhotoMatt · September 17, 2015

Thank you Mike,

The code works to change the active pages but the inactive pages remain grey. The code below is what I originally had to change the active pages to red...

/* Change text color of active page */
.sm-page-widget-nav-activepage > a {
color: #a50100 !important;
}
.sm-page-widget-nav-activepage > a:hover {
color: #a50100 !important;
} (edited)

And this works. But I don't know how to get the top menu text color for inactive pages lighter with out changing the dark grey on the bottom menu or the parent active link. I'm probably doing a horrible job at explaining. I hope the image below can explain it a bit better. The "Before" is how the site looks now. The "After" is what I want it to look like. The bottom menu appears once I click People. The dark grey is the site wide grey I don't want to change. The red is the active link and only the top menu non active pages are light grey. I basically want to distinguish the top and bottom menus from each other.

Allen · September 17, 2015

If those are two individual menu widgets each have a unique widget class name.
sm-page-widget-xxxxxxxx

PhotoMatt · September 17, 2015

Ok, the widget ID for the top menu is 12222444. What code should i use to target the inactive pages?

Allen · September 17, 2015

PhotoMatt wrote: »

Ok, the widget ID for the top menu is 12222444. What code should i use to target the inactive pages?

You'd precede the rule with this to make it specific for that widget.

.sm-page-widget-12222444 ....

PhotoMatt · September 18, 2015

Sorry I don't understand.. Like this?

/* Change text color of active page */
.sm-page-widget-12222444 > a {
color: #a50100 !important;
}
.sm-page-widget-12222444 > a:hover {
color: #a50100 !important;
} (edited)

Allen · September 18, 2015

Like this

/* Change text color of active page */
.sm-page-widget-12222444 .sm-page-widget-nav-activepage > a {
color: #a50100 !important;
}
.sm-page-widget-12222444 .sm-page-widget-nav-activepage > a:hover {
color: #a50100 !important;
}

PhotoMatt · September 18, 2015

Thank you Allen, but it didn't work. I tried using the code on the site wide css and page only css. The inactive pages of the top menu remained dark grey.

PhotoMatt · October 28, 2015

Hello,

Now that the site is live can anyone help me try and figure this whole menu color thing. In my previous posts are samples of what I'd like to do but I haven't been able to figure it out. Anyone up for a challenge? Thank you all for your time and help.

Hikin' Mike · October 28, 2015

Try this:

.sm-user-ui .sm-page-widget-12222444 .sm-page-widget-nav-color-default a, 
.sm-user-ui .sm-page-widget-12222444 .sm-page-widget-nav-color-default a:visited {
    color: #a1a1a1;
    }

PhotoMatt · October 31, 2015

Thank you Mike,

When I add the code to the entire site it changes the color of the bottom half of the page. What I want to change is just the inactive Top menu: links, People, Events, Retouched, Gallery, Clients, Booking to #c4c4c4. Not sure if this matters but I had to create a separate menu on each page. Attached is a sample of what I want it to look like.

Thank You!

Update: The code essentially removed my custom theme.

Change color of inactive text in menus

Comments