Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 02-20-2018, 09:34 PM
Rambb1 Rambb1 is offline
Junior Member
 
Join Date: 02-20-18
Location: india
Posts: 3
iTrader: 0 / 0%
menu overlapping on slider

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?
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 02-21-2018, 05:18 AM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 5,933
iTrader: 1 / 100%
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.
 
Reply With Quote
  #3  
Old 02-21-2018, 09:15 PM
Rambb1 Rambb1 is offline
Junior Member
 
Join Date: 02-20-18
Location: india
Posts: 3
iTrader: 0 / 0%
I am not using Z-index I am using only layerslider
 
Reply With Quote
  #4  
Old 02-24-2018, 03:10 AM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 5,933
iTrader: 1 / 100%
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.
 
Reply With Quote
  #5  
Old 02-25-2018, 10:42 PM
Rambb1 Rambb1 is offline
Junior Member
 
Join Date: 02-20-18
Location: india
Posts: 3
iTrader: 0 / 0%
#nav_id{
z-index:999 !important;
}

Tried it but itís not working. this my website you can seen problem yourself offcoupon.in
 
Reply With Quote
  #6  
Old 02-26-2018, 08:00 AM
J. H. Rasmussen J. H. Rasmussen is online now
Super Moderator
 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 5,933
iTrader: 1 / 100%
You need to find the styleshhet file: https://offcoupon.in/wp-content/themes/flatter/style.css

In that file find:
Quote:
.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:
Quote:
.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.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 05:07 AM.
Powered by vBulletin
Copyright © 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC