Drop Down menu hides under the web content, I tried to resolve the issue by making changes to z-index but no luck.
This issue is with IE only.
Please advise.
Here is link of my website
Related
I ask about the help of experts wp, I myself could not find in which direction to dig.
Problem: (only) at safari browser when scrolling page drop css (restructured DOM).
Screenshot: https://yadi.sk/i/a371nKioyH1Uyw
How to repeat:
open page and scroll down;
scroll to top;
over content appears foter and/or sidebar.
Example page:
http://142.93.111.137/education/?p=353
http://int20.ru/?p=467
site work on wordpress.
teamplate (ThimPress education pack): https://thimpress.com/product/education-pack-1-free-education-wordpress-theme/
Can check on domains:
http://int20.ru
http://142.93.111.137
The solution to the problem was to remove the bootstrap.
I inherited a website with some new business. The menu works fine on the desktop when viewed at full screen. When the browser is sized down and the navigation links are placed into the hamburger menu, it doesn't work. I'm not sure why it isn't working.
If you inspect the element, the links are there, but the nav bar doesn't expand at all. It's using foundation for the menu. I've read the documentation and I'm still not sure why it isn't working. Any guidance is appreciated.
Here's a link to the site: JordanPlumbing.com
Replace this code in lnm-scripts.min.js
jQuery(function(){if(location.hash!=""){window.location=location.hash.replace("#!","");}
jQuery(document).foundation();jQuery("#preloader").css("width",jQuery(window).width());jQuery("#preloader").css("height",jQuery(document).height());jQuery(".ajax-link").on("click",function(){jQuery(".ajax-link").removeClass("ajax-active");jQuery(this).addClass("ajax-active");});jQuery("ul.children").parent().addClass("page_parent"); jQuery(".slick-background-slider .slick-slide").css("min-width",jQuery(window).width());jQuery("#scrolltoform").click(function(){if(jQuery("#contactForm").length>0){jQuery('html, body').animate({scrollTop:jQuery("#contactForm").offset().top},2000);return false;}else{return true;}});});jQuery(window).load(function(){if(jQuery("#click-on-load").length>0){jQuery("#click-on-load").click();}
jQuery(".color-picker").on("click",function(){jQuery(".color-picker").toggleClass("translate");});});jQuery(window).on("resize load",function(){ if(jQuery(window).width()<=1500){var ratio=2560/1440;jQuery(".slick-desktop").css("min-height",jQuery(window).height());jQuery(".slick-desktop").css("min-width",jQuery(window).height()*ratio);jQuery(".slick-desktop").css("left",-((jQuery(".slick-desktop").width()-jQuery(".slick-background-slider .slick-slide").width())/2));jQuery(".slick-desktop").css("position","relative");}
else{jQuery(".slick-desktop").css("min-height","auto");jQuery(".slick-desktop").css("min-width","100%");jQuery(".slick-desktop").css("left","0");}
if(jQuery(".slider-wrapper").width()>jQuery(window).width()){var overflow=(jQuery(".slider-wrapper").width()-jQuery(window).width());var fixPositioning=overflow/2;jQuery(".slider-wrapper").css("left",-fixPositioning);}});jQuery(window).scroll(function(){jQuery("[class*='animate-from-'").each(function(){var theTop=jQuery(window).scrollTop()+(jQuery(window).height()-(jQuery(window).height()/4));var thisTop=jQuery(this).offset().top;if(theTop-250>thisTop){jQuery(this).delay(500).addClass("complete");}});});
I've been struggling with this problem for a few days now. Navigation bar on my page hides browser scrollbars. This happens in Chrome (both desktop and mobile) and Firefox - I didn't chceck other browsers yet but I suppose the result will be the same.
I tried like every single solution I found on Google and Stack Overflow but none of them fully worked. The navbar either kept covering the scrollbars or it wasn't clickable because it was under the rest of the page.
Can somebody browse my CSS and help me with this problem? Thanks a lot!
P.S.: I use no CSS framework. I downloaded the template from here and sligtly modified it.
I have a navigation menu issue that I can't figure out for the life of me, but basically my responsive menu doesn't respond in order to reveal the li's underneath it. The site is healyourselfnecklaces.com and the menu switches at 600px
Any help you can give me, including how you found the issue, would be greatly appreciated.
I believe you issue is that there is no JavaScript added to the menu button to toggle (show/hide) your menu when you are in a mobile view.
I am facing a problem with my navigation drop down menu hidden behind container class in IE(internet Explorer) browser but its working fine with all other browser.
I am stuck with this issue for 3 days. I tried too much to change css of my container class and my navigation class but failed :(.
I tried even display and visibility properties in my css but failed...
Please give me hint how i can fix this problem
here is my site
http://napodfw12.wildapricot.org/
if you open it in all other browsers than IE drop down of menu bar will display but in ie it is hidden,
i am uploading screen shot of this problem too.
IE is very annoying about z-index. I found that creating an IE stylesheet and setting the container and nav position to relative, then adjusting the Z-index seemed to work for me.