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");}});});
Related
I'm following a tutorial for a responsive navbar on youtube
and am using Dreamweaver to code. My code is the same as the tutorial's, but for some reason, the hamburger menu icon doesn't show up in browser preview, but shows up fine in my live code on Dreamweaver. (The menu icon is actually there, and if I click where it's supposed to be, the menu pops out.) Does anyone know how to fix this?
p.s I tried both Microsoft Edge and Chrome, but it still doesn't appear :(
Is there a way to target css to the mobile menu only? I am using http://athemes.com/theme/Sydney and my dev server is at http://150.101.201.63/wordpress2/WordPress/
Simply put when the menu changes to the mobile menu (one with single button to open menu versus top navigation menu) I want to add some styling. I used to do this by device width but I'm finding this less effective with this theme.
Any help appreciated.
Resize your desktop window to actuate the mobile display of your site and use a web inspector tool in your browser to find the element you'd like to change.
Your Dev site is broken, but Renovation Princess uses the element #respo-menu-list-left to effect portions of your mobile menu.
I tried/guessed it and the url is http://150.101.201.63/wordpress2/wordpress/, so now uppercase in wordpress.
I looked in over the website and when it displays the mobile menu it changes the menu id to mainnav-mobi, so you can safely write you css for that id and it will only show on mobile.
#mainnav-mobi {
/* css here */
}
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.
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
When using Android 4.1 on my Samsung Galaxy S3 and viewing my website, I'm trying to get the navigation menu on the left to stay where it is but it doesn't.
Whenever I click on a link from the menu and refresh the page the page, it bounces halfway down the html page and the links fail to work. It works fine on a desktop browser.
Anyone know how to resolve this problem?
Woohoo, figured it out. Very simple actually. Just needed to add a value to top and left after setting position: fixed.
For example: position:fixed;top:0px;left:0px;