Navigation Bar – Change font color per page

[Max K]

Hey Bill,

First of all, thank you for creating the Kerygma Theme – it’s beautiful. I was wondering how I would go about changing the color of the li items in the Navigation Bar per page like in the demo. For example I would want the menu item font color to be black on the Events and the Community Pages, while staying White on the Home and Series pages.

I tried to change to black myself, but then the Hover color wouldn’t work on those pages, so I thought you might know an easier way of doing it.

Also, since the text will be Black on those pages, how would I go about changing the background color of the collapsible menu to White for mobile devices or smaller screen.

Thanks!

[Bill Robbins]

Hello Max,

Thank you for your business first of all. I really do appreciate it. Great question too. It is possible to change the navigation menu colors for individual pages that are using the hero section.

To do that, edit the page you’d like to change. Look down for the Hero Area Options. In that box near the bottom are some options where you can change the colors of the navigation menu items (see attached screenshot).

In this instance, if you change one, you’ll probably have to set them all to make sure that they work with the correct colors.

If you run into any questions or trouble, just let me know.

Have a great day,
Bill

Attachments:

1. 

   Screen-shot-2014-09-11-at-8.56.50-AM-913-x-528.png
   

[Max K]

Awesome, thanks! It worked like a charm.

The only thing now is, since the Events page doesn’t have a hero section, how would I change it so that the “Events” menu item is color blue while on the events page, to indicate to the user what page they’re on?

[Bill Robbins]

Great follow up question. Since the link to the event calendar is added as a custom link and not something that’s part of WordPress’ native menu system (like a page or post category) it doesn’t get the current menu item class added to it.

We can add it though with just a bit of custom styling. 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:

   
   .events-archive li#menu-item-328 a,
   .events-archive li#menu-item-328 a:visited {
   	color: #1b568e;
   }
   

3. Update your settings.

WordPress adds a unique ID to every menu item and a unique class to the body tag on each page. We can use those together in the snippet above to change the color only when those two are combined.

See if that won’t let you have a current page color for the event calendar.

Let me know if you have any questions or trouble,
Bill

[Max K]

Perfect, that did it. Thank you very much Bill!

[Bill Robbins]

Anytime Max. Have a great day.

[Author]

Posts