Hero menu color

[Jenny Anderson]

Hey Bill!

Question for you about menu colors. Is there a way to change the color of the menu when a hero is present? I currently have a black menu but when there is a hero image it is somewhat hard to see. I would love for the menu to be white while there is a hero and then black when you scroll down.

(I also have a site using Grassroots and I know this is possible with that theme just wondering if there’s a way to do it with Elite)

Thanks!

[Bill Robbins]

Hello Jenny,

Excellent question. I don’t have a way that’s built into Elite to do that (probably should add one). It can be done though. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .page-id-2564 nav#top-menu li a {
   	color: #fff;
   }
   

   The 2564 in the snippet above is the page ID of the page where you’d like to change the color of the navigation menu. You can change the number to the ID of the page you’d like to change and also the color too.

3. Update your settings.

That should get it. Let me know if you have any trouble.

Thanks,
Bill

[Jenny Anderson]

Hey Bill!

That worked for the top of the page, but it doesn’t turn black once the background pops up which makes the menu impossible to read. Any way to fix that? Additionally I would love to have the white logo on top when there is a hero, but again switch back to the black logo when you scroll.

Thanks for your help!

Jenny

[Bill Robbins]

You should be able to do that. Add this to your Custom CSS too:

.page-id-2564 #header.scroll-background nav#top-menu li a {
	color: #000;
}

.page-id-2564 #logo img {
	display: none;
}

.page-id-2564 #logo a:before {
	content: url(https://yoursite.com/alt-logo.png);
}

.page-id-2564 #header.scroll-background  #logo img {
	display: block;
}

.page-id-2564 #header.scroll-background #logo a:before {
	content: '';
}

Just replace the http://yoursite.com/alt-logo.png with the URL to your other logo. You can get the URL by uploading the image into your WordPress media library and clicking on the edit link. The file URL will be listed on the next screen.

See how that goes,
Bill

[Author]

Posts