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 :(
Related
so on https://www.charitygolfsigns.com/ I have the menu collapsing into a hamburger menu icon for mobile, but tapping on it does nothing on my phone and other people's phones. Yet it works when clicking on it on mobile simulators in Google Chrome DevTools and when shrinking the normal browser window.
I've been taking the WordPress additional CSS out and back in but it doesn't shed any light on where the problem is.
Any help is really appreciated. Thanks.
Right now i dont see anything on that site, that could toggle your menu at all (even in the DevTools).
You can add a simple jquery Script, that toggles your menu:
<script>
jQuery('.header-mobile-menu').click(function() {
jQuery('#site-navigation').toggle();
});
</script>
But even if that toggles your navigation - you still need a style for it or toggle an individual block for mobile. Because right now, it would only toggle your "Desktop" Navigation
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 can't for the life of me figure out how to fix this issue... The jupiter theme is showing a white overlay on top of the full screen video in chrome but displays fine in firefox... I've looked through the css and can't seem to find any issues... but the strange thing is that when I open the inspector and delete the main container for the page section then hit command Z the white space dissappears and I can see the whole video... Any help would be greatly appreciated.
Link:
http://s579222454.onlinehome.us/about-us
I tested Nvidea css drop down menu on a site with XML Flash rotating banner , it works find on opera but doent work on internet explorer and google chrome, it actually goes behind.
menu from : http://www.lwis.net/free-css-drop-down-menu/
see link here: http://sonymax.co.uk
thx
Seems there is a problem with the menu actually, I removed the banner in IE and the drop-down menu still doesn't show up. Also note, that if you change your compatibility mode from IE7 to IE8 or 9 the menu and banner are way off. You should revise your code a bit.
It works in my Chrome, not sure why it doesn't in yours, only IE has the problem as far as I tested.
I'm really hoping I can find a CSS expert to help with this odd problem.
In Chrome/Firefox and Opera this works fine.
However in IE9 and maybe earlier versions I have a problem.
To see the problem follow these simple steps.
1) Goto www.spoilertv.com and hover over the HOME button/link
2) Hover over the "Twiter Connect" button
3) The menu disappears.
The Twitter Connect button is a Twitter Anywhere button which basically creates an iframe.
Hovering over the twitter button causes the menu and hence the button to vanish. It's as if the mouse has moved away from the dropdown.
This all works with Firefox and Chrome and Opera.
I'm at a complete loss here :)
Looks like this is "designed" IE behaviour
IE7/8: div loses :hover if mouse moves over an iframe which is inside the div!
I've had to replace the Twitter #Anywhere button with a custom button and signin function which removes the need for an iframe
https://dev.twitter.com/docs/anywhere/welcome#login-signup