Calendar breaking main nav css

[Ben]

Hi

the event calendar seems to be breaking the css on the main nav above it. The selected page ‘events’ should highlight in red and the whole menu strip should minimise slightly when you scroll down but it’s doing neither. How can I remedy this?

Cheers

Ben

[Barry]

Hi Ben,

It looks like you are using the Default Events Template. I wonder, can you try switching to the Default Page Template (you can do this in the Events → Settings → Display screen) and see if that helps?

Let me know how you get on!

[Ben]

Ok so doing that has made the nav bar start to collapse again on scroll which is great but the selected menu option in the nav bar is usually highlighted in red which it’s still not doing. In addition, this view doesn’t pull through the background colour of the site which is black, instead it shows white. There is also a random line of the top left of the page and also loads of recent post and meta info under the calendar which looks pretty messy!

[Barry]

Hi there Ben,

I’m glad at least part of the problem is solved!

Unfortunately, depending on the theme, there can be a number of tweaks and adjustments that are needed to get a truly glove-like fit.

• In relation to the menu highlighting, please see this existing forum topic
• To ensure the page background is black (you may consequently need to adjust the font colours, etc) please see this section of our Themer’s Guide – knowledge of CSS will be required!
• Adding some custom CSS should also let you resolve the “random line” (this is actually caused by rules put in place by your theme)

I hope that gives you a starting point here 🙂

[Ben]

Ok so from what Brook is saying in the post, I should add this to my CSS –

body.tribe-theme-parent-Avada .menu-item-1648{ color: #ff3030}

This is the menu item number and the hex code for the highlight colour I need it to be but it doesn’t work, any suggestions?

[Barry]

Hi Ben,

So Brook’s advice relates to the specific theme of the other customer – you’d need to adapt this slightly in your case – something like this might help:

.tribe-events-page-template #top-menu .menu-item-1648 a { color: red }

Be aware though that if you subsequently modify the menu you may need to revise the section reading .menu-item-1648 (in my suggested code).

Does that help?

[Ben]

Great, thanks!

[Barry]

Happy to help 🙂

[Author]

Posts