CSS in Avada for Navigation links above the calendar in Month View

[Sean]

We added this bit of CSS to our theme’s (Avada) stylesheet, but it doesn’t produce any navigation links above the calendar. Was surprised at this given you and Theme Fusion’s recent collaboration to make that theme and TEC fairly well integrated and compatible.

Are you aware of this css not working with Avada? Note that adding the !important declaration did not work either. Any suggestions?

Please see the url provided for Site’s URL for an example.

[Brian]

Hi,

Thanks for using our plugin. It is true that Avada added a large amount of customization to the Events Calendar directly in their theme.

It was not a collaboration with us though, we help answer some of their questions, but provided no input on the result.

I found the issue and this css worked for me to show the links:

#tribe-events-content.tribe-events-month #tribe-events-header {
display: block;
}

Add that css to your theme’s stylesheet or through a plugin such as Simple Custom CSS.

Let me know if that helps.

Thanks

[Sean]

Good afternoon Brian,

Thank you for explaining about the relationship with Avada. That is good to know 🙂

I tried your snippet and that does indeed work for me as well. The only issue is that the “Back to Current Month” link (that I had added via another TEC KB article) is aligned to the left for the navigation links at the top of the calendar (as opposed to being aligned in the middle between the previous and next month navigation links). So both that and the previous month link text are stacked on top of one another and not readable. The navigation links displayed under the calendar view still display the links aligned correctly though.

[Brian]

You’re Welcome.

Do you have a link where is happening? I might be able to take a look and have another suggestion.

I followed the initial link your provided, but did not see it there.

Thanks

[Sean]

This reply is private.

[Brian]

Hi,

I see what you mean looks like some css conflicts in there from the different customizations.

I found this css works to improve the look you might have to take it from here to get it how you would like:

#tribe-events-content #tribe-events-header .tribe-events-sub-nav li.tribe-events-nav-current {
float: left;
margin: 0 auto;
text-align: center;
width: 100%;
}

Cheers

[Sean]

Brian,

This got me headed in the right direction. Just had to fiddle with the margins to get it exactly how I wanted.

Appreciate you taking the time to help here!

Best,
Karly

[Brian]

You’re Welcome and glad it helps get you going.

I am going to close this ticket, but if you need anything else related to this topic or another please post a new topic on the forum and we can help you out.

Thanks

[Author]

Posts