menu overlapping on slider

[Rambb1]

Hello,
I am getting menu overlapping on slider problem. In my menu, i have a dropdown list. When this list is open the layerslider is overlapping my menu. Do Anyone have an Idea what causes this problem?

[J. H. Rasmussen]

That is usually because the z-index number is to low for the drop-down menu, change the z-index for the drop-down menu container to a higher number then the z-index the slider uses, that usually fix the issue.

If you want more specific help, then you can post a non-life url to the page with the issue, then i don't mind taking another look at it.

[Rambb1]

I am not using Z-index I am using only layerslider

[J. H. Rasmussen]

z-index is a property you use in stylesheet, both Wordpress and the LayerSlider add-on uses stylesheet.

But your reply told me that you're probably not a very experienced coder, so if you post a non-live link to a page with the issue you describe, then i will most likely be able to tell you exactly how you can fix it.

[Rambb1]

#nav_id{
z-index:999 !important;
}

Tried it but it’s not working. this my website you can seen problem yourself offcoupon.in

[J. H. Rasmussen]

You need to find the styleshhet file: https://offcoupon.in/wp-content/themes/flatter/style.css

In that file find:

.header_menu_res ul { position: static; float:left; margin:0; padding:0; list-style:none; z-index:99; line-height:1; font:normal 13px Ubuntu, HelveticaLTStdRoman, Arial, Helvetica, sans-serif;}
.header_menu_res ul.menu { margin:7px 0; }
.header_menu_res ul a { padding:6px 15px; position:relative; color:#fff; display:block;line-height:18px; text-decoration:none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.header_menu_res ul li { float:left; margin:0 6px 0 0; width: auto; z-index:20; text-transform:uppercase; }
.header_menu_res ul.menu > li.active { z-index: 19; }
.header_menu_res ul.menu > li.active > a { color:#fff; background:#2DAACD; }
.header_menu_res ul.menu > li:hover > a { background-color:#fff !important; color:#333; }

.header_menu_res ul.sub-menu { position:absolute; display:none; width:180px; border:1px solid #eee; border-top:none; border-width:1px 1px 0; z-index:21; display:none; position:absolute; margin:-4px 0 0; -khtml-border-radius:0 3px 3px 3px; -moz-border-radius:0 3px 3px 3px; -webkit-border-radius:0 3px 3px 3px; border-radius:0 3px 3px 3px; width:200px; -moz-box-shadow: 0 1px 2px #d9dadb;

And replace it with:

.header_menu_res ul { position: static; float:left; margin:0; padding:0; list-style:none; z-index:99; line-height:1; font:normal 13px Ubuntu, HelveticaLTStdRoman, Arial, Helvetica, sans-serif;}
.header_menu_res ul.menu { margin:7px 0; }
.header_menu_res ul a { padding:6px 15px; position:relative; color:#fff; display:block;line-height:18px; text-decoration:none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.header_menu_res ul li { float:left; margin:0 6px 0 0; width: auto; z-index:101; text-transform:uppercase; }
.header_menu_res ul.menu > li.active { z-index: 100; }
.header_menu_res ul.menu > li.active > a { color:#fff; background:#2DAACD; }
.header_menu_res ul.menu > li:hover > a { background-color:#fff !important; color:#333; }

.header_menu_res ul.sub-menu { position:absolute; display:none; width:180px; border:1px solid #eee; border-top:none; border-width:1px 1px 0; z-index:102; display:none; position:absolute; margin:-4px 0 0; -khtml-border-radius:0 3px 3px 3px; -moz-border-radius:0 3px 3px 3px; -webkit-border-radius:0 3px 3px 3px; border-radius:0 3px 3px 3px; width:200px; -moz-box-shadow: 0 1px 2px #d9dadb;

The LayerSlider add-on uses some elements with z-index value between 10-50, so for the drop-down menu to be visible on top it has to use higher values. The menu uses some z-index values between 19-21, so i have edited those values to be between 100-102 so the menu is on top of the slider.

I have tested it, so it should work.