z-index setting for menus

Where do I change the z-index setting for the navigation menu?

z-index is CSS.

Could you provide a link to your site so I can better assist?

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

The route you take depends on how your site is currently set up, so a link would be helpful.

Hi. Thanks for the reply. I am using a Child-Theme for Coraline. I can’t provide a link, because it is a company intranet hosted on site so there is a firewall. I have modified the Style sheet for the child-theme so I am familiar with that, I just don’t know where to put the z-index text.

Normally you’d probably want to try to track down what specifically on your site is overriding the menu’s z-index and have a look at the code.

For example, one of your plugins might be the culprit, and to track that down you can temporarily deactivate all plugins. If your menu works fine again, reactivate them one-by-one to find the culprit.

The reason it’s better to find what’s causing the issue rather than just changing the theme’s menu, is that you may not know what number to set the z-index to on your menu until you see what’s actually causing the problem. That said, you can always go by trial and error. ??

By right-clicking the menu in a browser inspector – like Firebug, or the ones built into Chrome or Firefox – you can see which elements for which to try targetting the z-index.

For example, the main menu itself is in a div with a class called menu. That div is in another div with the ID access.

More about the z-index property:

https://htmldog.com/reference/cssproperties/z-index/

Hope this points you in the right direction!

Thanks. I already know the culprit – TablePress. I have been in contact with support and he suggested increasing the size of the z-index. Here is his text:

a possible fix for the issue should be to increase the z-index value of the menu to a very high number. For that, you’d have to find the HTML ID or class for the menu element and then add some CSS like #the-menus-id {
z-index: 1000000;
}
to the theme (or the “Custom CSS” in TablePress).

I could also add it to the TablePress CSS sheet, but I don’t know the name of the menu to increase the z-index for.

I could also add it to the TablePress CSS sheet, but I don’t know the name of the menu to increase the z-index for.

I gave it to you above:

the main menu itself is in a div with a class called menu. That div is in another div with the ID access.

I don’t suggest 1000000 as the site’s menu may then override the WordPress admin bar, but like I said trial and error may be the best route here.

You could also ask the plugin author what element in the table has the too-high z-index and override that in your child theme.