Hover CSS

[Mark]

Hi,

I know you guys are really clever!

Would someone mind please playing with the CSS at https://www.financialtrainingassociates.com/course/ so that the hover feature appears on top of the header rather than underneath it?

I am not clever enough! I have tried changing the z-index of the header to -1 but the menu items there stop working. Then I’ve followed other advice in the support forums and targeted .tribe-events-calendar .tribe-events-tooltip with a high z-index but that seems to have no effect.

Is there a CSS genius who can get this working please?! (You guys have always been great in the past).

Thanks,

[Victor]

Hi Mark!

Thanks for coming back to us!

This one might be a bit difficult to accomplish because the hover effect is applying to the <td> tag which is also the container for that day header. In other words, the header is inside the <td> tag.

I guess you could do a template override to add another element (could be a <div>) that will contain all the events for that day, but not the header. So then, you could apply the hover styles to that new container.

There is a great Themer’s Guide that explains how you can do a template customisation, so you can add that new element to the template.

Hope this helps and let me know if you have any other question.

Best!

Victor.

[Mark]

OK

Thanks for the ideas…

…and for confirming that it’s not as easy as it should be (and I am not as
bad at CSS as I thought)!

You can close this one for now.

Thanks for coming back to me – I appreciate it.

M

By the way, when I said “header” I meant my theme/ page header, not the
calendar header

[Author]

Posts