Underline on menu link not working on Events Calendar page…

[Terry Sullivan]

When I click on my Events tab, the Menu (link) should remain underlined once I’ve selected that page? This effect comes automatically from the RISW theme’s design, however, it only takes effect on regular pages and posts. “Events” is neither of those, so the effect will not work on this menu item. Can you please provide the CSS Code that will fix this issue?

Thank you for your help!

~Terry

[Geoff]

Hey Terry, nice to see you again!

I bet that’s because the theme is not recognizing the Events archive as a page. In other words, there is a CSS class being added called .current_page_item to the link in the menu when a page is active but that class is not being added by the theme. It might be worth checking in with the theme author to see if the menu supports custom archive template, which is what the Events page is.

Cheers!
Geoff

[Terry Sullivan]

Hi Geoff,

Your theme questions are very helpful… I so appreciate your friendly help, Geoff!

I have forwarded your questions to the Thrive Theme tech support team to see if they can shed any light on this. I will let you know what they say. I hope there is a fix for this… 🙂

~Terry

[Geoff]

For sure, my pleasure and thanks for following up! Please do keep me posted. 🙂

Geoff

[Terry Sullivan]

Hi Geoff,

I got an answer to your question… Please see the below response from the Thrive theme tech support expert and let me know your thoughts. I really love my Events Calendar plugin and have used it for years. I’m a presenter and trainer and absolutely need your plugin to do my job… I love it! That said, I sure would appreciate any help you can provide that will help me fix my two issues. The underline is one issue, and I am also having a formatting issue with my iPhone calendar… I so appreciate any help or advice you may be able to provide, Geoff. Please see their response below and give me your thoughts…

The theme does not recognize the Events Calendar archive as a page, since it’s not a regular page – it can’t be edited with WP editor, nor TCB. Therefore, it does not add the CSS class called .current_page_item to the link in the menu when this page is active. This is exactly why the “Events” menu item is not underlined like the other ones, when you navigate to it. I was hoping that “Events Calendar” plugin support would have a workaround for this – or maybe some custom code to make the underline effect active on the “Events” menu item. Are they not able to provide a solution for this?

[Geoff]

Hey there, Terry!

Hmm, the navigation styling seems to work with a default WordPress installation using the Twenty Fifteen theme. For example, here’s a screenshot of how the “Events” item in the navigation is bolded when the calendar is the current page.

The same should be true with your theme as well, assuming it is consistent with WP’s default nav menu logic, then it should work right out of the box. My assumption, however, is that the theme has customized this in some way which is preventing the styling from happening.

Sorry to bounce you back-and-forth. It seems like if it works in default WordPress, then it should work in the other theme as well. Let me know if that’s not the case for some reason!

Geoff

[Terry Sullivan]

Hi Geoff,

I sent you question to the Thrive theme tech support team. It will be interesting to see how they reply. My guess is their coding is complex. If it turns out that this is not an Events Calendar plugin issue, will it be possible for a CSS coding expert to fix this. In other words, should I find a CSS coding expert that can write some CSS code that I can insert into my them that will fix the menu link issue? I will let you know what they say, Geoff.

Thanks so much for all your help…

I so appreciate you!

~Terry

[Geoff]

Thanks for following up, Terry!

I am hoping the theme developer will be able to find a proper solution, but you could manually apply the underline using CSS with something like:

.tribe-events-style-full header nav>ul>li.menu-item-208 a:before {
transition: width 0.3s linear;
background: rgba(255,255,255,0.5);
content: '';
display: block;
height: 2px;
position: absolute;
left: 0;
right: 0;
top: 150%;
width: 0;
}

That may not be correct, but it’s based off of the theme’s styles for the underline and trying to target it to only pages where the body class is specific to the calendar, on that specific menu item. If nothing else, perhaps the theme author can tailor that a little further.

Thanks!
Geoff

[Terry Sullivan]

Hi Geoff,

Thank you so much for sending the code. I applied it, but it didn’t work. Also, below is answer to our question from Thrive Theme tech support. Could you please tell me what I need to do to fix this. Should I hire a CSS or HTML programer to fix this? Do you think this issue is fixable, Geoff?

Thank you for all you help, Geoff… I so appreciate you!

~Terry

Hello Terry,

Yes, the WordPress theme applies the .current_page_item class to archive pages as well, while Rise does not. This is the problem – it would be great if this was a regular page/post, this way the class would be applied.

As a workaround, I would suggest highlighting this menu item. You can do this by going to Appearance – Menus and checking the “Highlight Menu Item” option for the “Events” menu item.
See screenshot: http://screencast.com/t/AmcZPK3rRx

You can edit the highlight colors by going to Appearance – Customize – Header
Visual aid: http://screencast.com/t/sMohsUuT

Best regards,
Eti

[Geoff]

Hi Terry,

Ah, so it is a limitation of the theme. I’m afraid I’m unable to work on a solution on the theme side of things, but perhaps the suggestion from the theme author to update the settings as a workaround would help.

Or, if you’d prefer the CSS route, you can probably play around with the snippet I provided. The styles are correct; it just needs to target the element correctly…so this is what needs editing:

.tribe-events-style-full header nav>ul>li.menu-item-208 a:before

For example, it could be something like this instead:

.tribe-events-style-full .menu-item-208 a:before

…or something else altogether. We do have a list of customizers who might be available to help, or perhaps the theme developer can help correct the CSS selector knowing that there is a body class for events pages.

Sorry, this is about as far as I think I’ll be able to help here in the forums. Let me know if this at least gets you started in the right direction!

Thanks,
Geoff

[Terry Sullivan]

Hi Geoff,

Thank you for taking the time to help… I tried the new location, but it’s not working. But that’s ok. I now have an understanding of what I need to do to get this issue fixed. I will check out your list of customizers.

Thank you so much for all your great, friendly help!

~Terry

[Terry Sullivan]

Hi Geoff,

Please mark this ticket as resolved.

Thanks again!!

~Terry

[Geoff]

My pleasure! Thanks for working with me on this and for your friendliness as well.

Cheers,
Geoff

[Author]

Posts