Calendar month renders over wordpress menu

Yeah, I had the same issues, The Event Calendar doesn’t play well with others. The solution, courtesy of the support team is to raize the z-level of the main menu. I think I set mine to 102 in the z-level. I used an Elementor 2 header, don’t know how it’s done when under theme control, but in Elementor you set the z-level in Advanced settings for the menu widget.

Thanks kenstor
That helps me understand.
Can’t see an easy way to do that with TwentySeventeen theme.
Will see if the support team have a pointer to how to do it.

Hi @daverob

Thanks for your interest in our products.

Do you have a link for the site you are working on?

I’m having a hard time replicating this on a test install of my own, it would definitely help to inspect the site. Have you made many CSS modifications?

Hi Ed
Thanks for the help. It sits on Ubuntu on a VM behind a firewall at the moment whilst I am working on it – not for any strong privacy reasons. I’ve temporarily opened it up but access will be a tad slow. Try accessing lwbc.dnsdynamic.net. I’ve changed the permissions so the events calendar is no longer members only. Go to the members only menu, then select “what’s on” to show the calendar. Then open the menu again – the month will render above the menu and as soon as the mouse hits that as you navigate down the menu it clears the menu.
Tell me when you are done and I’ll revert the firewall settings.
Dave

• This reply was modified 6 years, 9 months ago by daverob.
• This reply was modified 6 years, 9 months ago by daverob.

argh – when the dynamic dns stabilises that is ??

Hey @daverob, all good, I was able to access it ??

I’m not sure that I am seeing the same thing that you are describing. There’s really nothing erratic looking to me. The view menu behaves as it should, I do notice that it is inheriting some possibly custom styles from the theme.

What I’m seeing: https://p.tri.be/mL66Ph

You could play with the default template settings in Events → Display. You can also create a custom page template, make it global and use it for The Events Calendar.

Maybe a screenshot would be better to show me what’s going on. If you feel that the dropdown menu is reaching too far, you could perhaps add a margin-bottom selector to #tribe-bar-form in your custom CSS.

Hope that helps!

Thanks Ed

The issue arises when the “members only” drop down menu is opened up – it appears over the top of the “month” of the events calendar and “Month” appears over the top of it

https://d.pr/free/i/ZQSmni

I’ll have another look at the default settings but can’t find anything that affects this

Dave

Hi @erishel

Had a good rummage, can’t see any simple changes. Screenshot in the previous posting

Regards
Dave

I’m sorry that I misunderstood! kentsor is correct, you’ll want to set the z-index to your menu to 2 — or play with .tribe-bar-views-inner tribe-clearfix and set to 1.

Here’s a quick link for reference on how z-index works → https://css-tricks.com/almanac/properties/z/z-index/

Hope that helps!

Thanks Ed and thanks kentsor I’ll have a poke at it

Regards
Dave

Solved.
For anyone else who needs it…
Changing to 2 did not solve it – value needs to exceed 99.

Currently, in Twenty Seventeen, at line 3469 in style.css:
.navigation-top {
bottom: 0;
font-size: 14px;
font-size: 0.875rem;
left: 0;
position: absolute;
right: 0;
width: 100%;
z-index: 3;
}

Change z-index from 3 to 100

Once again, thanks chaps.
Dave

Awesome! Glad you got it figured out.

I’m going to go ahead and close out this thread — don’t hesitate to create a new one any time you need help!

Take care,
Ed ??