Support

Support Staff

May 7, 2015 at 12:39 pm

Hello again Richard, it looks like the z-index needs to be adjusted. I tested some various values and this works:

#espresso_calendar {
    z-index: 90;
}

Try adding that to your child theme’s stylesheet or through a plugin like My Custom CSS or Reaktiv CSS Builder.

—
Lorenzo

May 7, 2015 at 1:36 pm

Hi Lorenzo,

That code highlights red in my CSS editor which usually indicates something is wrong. Saved it anyway and no change.

Support Staff

May 7, 2015 at 2:13 pm

Hi,

I’m not seeing any typos so I’m not sure why it would be flagged in red font.

Try this version:

#espresso_calendar {
    z-index: 90 !important;
}

—
Lorenzo

May 7, 2015 at 4:16 pm

Hi Lorenzo,

It doesn’t like the #espresso_calendar thats what turns red

Should I perhaps modify the calendar css file directly?

It has z-index: 100;

/wp-content/plugins/espresso-calendar/css/calendar.css

Support Staff

May 8, 2015 at 6:12 am

Hi,

Any edits to core files will be lost when you update the events calendar add-on.

Can you add that line to your child theme’s stylesheet directly?

—
Lorenzo

http://www.comedyguys.com/calendar/

May 8, 2015 at 11:47 am

Hi Lorenzo,

I added the line as requested without change in the results.

What now?

Support Staff

May 8, 2015 at 12:06 pm

Hi Richard,

Your code editor might not like it when an ID is used instead of a class name.

Anyway, I suggest a different approach to this: You fix the nav menu by adding this to the theme’s stylesheet:

.nav-horizontal .menu-item {
z-index:100;
}

If the above does not work for you after clearing your browser’s cache, it may help to up the specificity of the style rule, or tack on the !important declaration.

May 8, 2015 at 12:15 pm

Hi Josh,

I tried that and adding !important without results.

Not sure what you mean by “upping the specificity of the sytle rule” as I am not versed in CSS.

What’s next?

http://cl.ly/image/0F0b0e2Y0C0z

Support Staff

May 8, 2015 at 12:32 pm

Hi,

Try targeting the entire header:

.header-sticky{
z-index: 115;
}

It appears to work in Safari developer tools:

—
Lorenzo

May 13, 2015 at 6:50 pm

I tried all these without success.

You can view the issue here:
http://www.comedyguys.com/calendar/

The About and FAQ menu items are long enough to see that they display behind the calendar.

Tony

Support Staff

May 14, 2015 at 2:51 am

Hi Richard,

The calendar has a z-index of 100 and the code Josh provided set the z-index of the nav bar to 100.

Try this and see if makes a difference:

.nav-horizontal .menu-item {
z-index:125;
}

May 14, 2015 at 8:51 am

Hi Tony,

Still no change. 🙁

https://eventespresso.com/topic/drop-down-faq-menu-appearing-behind-calendar/

Support Staff

May 14, 2015 at 8:55 am

Hi, it works in Safari:

I recall from another support post that you cleared a CDN and possibly another caching service. Did you try force refreshing your web browser to load the latest CSS?

—
Lorenzo

Support Staff

May 14, 2015 at 8:58 am

Hi Richard,

The other thing to check is, are the CSS changes actually loading in your browser? Many times your browser will load a cached copy of the stylesheet. So it can help to clear your browser’s cache.

May 14, 2015 at 9:09 am

Hi Lorenzo and Josh,

I did clear the cache and CDN without change.

We have the live site and a dev site exhibiting the same issue.
Would access to the dev site help to sort this out?

Support Staff

May 14, 2015 at 9:16 am

Richard,

What’s the name and line number of the CSS file that you’re adding the style rule to?

May 14, 2015 at 9:16 am

Also, in Safari I am experiencing that the drop down menus are still behind the calendar, but they also cannot be clicked on when they drop down. Moving the mouse to the drop down makes it disappear.

I realize that is unlikely to be Expresso related, I am just mentioning it for your awareness.

May 14, 2015 at 9:18 am

Hi Richard,

I am adding these to the child theme style sheet

style.css
line 32 thru 38

Support Staff

May 14, 2015 at 9:18 am

Richard,
What’s the name and line number of the CSS file that you’re adding the style rule to?

May 14, 2015 at 9:19 am

Josh, sorry for the name mixup. This is driving me nuts. 🙂