Main navigation css

[Mike]

When the events calendar is activated, it creates is own page which is then included in the default navigation for my site, however, the class “current_page_item” is not being applied to menu entry when viewing the page which means that the page title in the Nav doesn’t have any of the current page item styles applied when viewing that page.

Is there a workaround for this, it seemed easier in the previous version when you could just add the embed shortcode to any page you wanted to show the calendar on.

[Rob]

Hey Mike. Thanks for reaching out; interesting issue, and I believe this is the first time it’s crossed my plate. While this is a bit outside my area of expertise, I’ve asked our dev Jonah to take a look and see if he can offer up any solutions here this afternoon. Stay tuned.

[Jonah]

Hi Mike, got an example URL I can look at?

[Mike]

Hi Jonah, have a look here: http://pen.harrisonandco.com/events/

[Jonah]

Hey Mike, thanks for the link. Ok, you’re going to have to add some custom CSS to highlight the Events menu item. You can add this to events.css (make a duplicate copy of /wp-content/plugins/the-events-calendar/resources/events.css and place in an ‘events’ folder in your theme) or add to your themes CSS:


.single-tribe_events .page-item-17,
.events-archive .page-item-17 {
color: #EF3E53;
}


You could even make this more specific by adding a specific class to your Events menu item in the WordPress menu editor if you are working with WordPress custom menus.

I hope that helps,
Jonah

[Mike]

Thanks for your prompt reply, I tried adding that css to the existing stylesheet, a copy of the events calendar stylesheet, and to the original events calendar stylesheet, all to no avail.

Couldn’t see how this would work anyway as there is no .events-archive or .single-tribe_events class being applied to the navigation menu list item for “events”

I’m not using custom menus as they are a pain in the arse when it comes to clients adding their pages.

Any other ideas? Can I hack your plugin to append the appropriate class to the menu item?

Cheers,

[Jonah]

Hey Mike,

.single-tribe_events is the body class present when on a single event and .events-archive when on the calendar grid or events list. I forgot to include the ‘a’ selector in there. Try this:


.single-tribe_events .page-item-17 a,

.events-archive .page-item-17 a {

color: #EF3E53;

}


[Mike]

Aha, got it, thank you, it’s a pleasure to have a plugin provider who is on the case.

[Jonah]

Glad that worked Mike, if there’s anything else we can do don’t hesitate to ask. And if you feel up to it we’d really appreciate if you mentioned us on Twitter, Facebook or your blog if you have one!

Thanks,
Jonah

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts