Here is my link: http://www.websouthend.co.uk/jc/
I am having issues with my drop down menu.
Under the galleries link there is a drop down, which is dropping down and displaying fine in Firefox, a little funky in chrome but can be fixed with css.
My issue is the links aren't actually directing to the pages... The markup looks ok the anchor tags are surrounding the text and formatted correctly, so I can't for the life of me figure our what's missing.
The sub menu (drop down menu) anchors have a data-toggle="dropdown" i expect this prevent the link from opening. Javascript try to open a new dropdown and the default click behavior stops.
Also see: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/20
Related
After too many hours of frustration spent not understanding what was happening, a random idea to test seems to have confirmed the issue, but no idea how to properly resolve, and I'm truly not certain if this is a wordpress, css or even a theme caused issue (Avada theme). So a quick explanation:
Wordpress, Avada theme. Everything updated and patched. There is a menu on the site. There is a basic white color for the text, and hovering over a menu item changes the text color to orange and adds a border to the top and bottom. Nothing crazy. Just a little "animation" by setting a base state for the menu items (text white, background transparent, no border), and setting some different parameters for when it's hovered/active. I actually set the options in the avada builder, but also confirmed what was being applied with chrome dev tools. While in the builder back end after setting this, it works flawlessly. Hovering a menu item triggers the transition and moving off returns it to original state. If I visit the page normally however, all the menu items are already displaying and stuck in their hover state. From first moment it's visible it's already like that, and all the menu items are the same as if they were all being hovered. Hovering, clicking etc doesn't change the state. It acts like the hover/active properties are always active. Even trying to force change the element state in chrome dev tools doesn't change anything. If I go back into the live edit mode (which is still rendering the site as well), it's functioning perfectly.
I couldn't find much of anything hunting the forums. But a lucky break....I noticed that all the links in the menu were of anchor link variety. The kind that has ...com/#xxxxx in the url where clicking on it scrolls to a section or part of the same page instead of taking you to a unique page. The site was set as a one page. Using the avada Wedding demo site as a starting point. So I tested replacing a menu item with an anchor link url with any other link without the #xxxxx . Suddenly, it works perfectly again. Any of the anchor link items will still be stuck in that hover state appearence, but any item not using an anchor link looks and works fine even when the menu is a mix of both.
So the dillema. The page is all on one page, so the menu items need to use the anchor style. I'm not certain why anchor link seems to be be stuck on hover/active. I had wondered if it's just technically always active by the way it works which would explain this. Any thoughts?
Menu items with anchor link urls don't change between regular or hover/active state
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 currently have anchor tags in my main navigational menu, which when clicked will open the corresponding accordion item below. The problem I am having is, when you click on the anchor link, the accordion will open 1/2 way down the inside content, and you cannot see the accordion header/title. It is almost like it opens at the bottom of the content.
Everything seems to work with no problems in Firefox and Chrome, but the dreaded IE will not behave.
Does anyone have any suggestions or ideas?
Thanks much!
Jen
in my web application i am using Hover Menu (ajax) control. I am using two hover menu controls (one hover menu on that second hover menu) it is working fine, i mean the tow hover menus are displaying fine in Mozilla browser and it is not working in IE. can u help me thank you. I mean one hover menu is displaying but sencond one is not displaying on it in IE.
You're probably hitting the Internet Explorer z-index bug - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/.
I want to debug the CSS for a DHTML menu, but the element I want to debug is a submenu, so it only appears when the top element in the menu is clicked.
So I can't use that button on Firebug that shows the CSS for the next element clicked, because when I click on the top menu item it will show the CSS for that element, not its child, and if I expand the menu first and then click on the Firebug button the submenu disappears (it disappears when it loses focus).
Any tips on how to get out of this catch-22?
Use firebug console command line to run click event. Like $('#menutab a').click(); If it's needed, you could also set breakpoint to avoid hidding.
Read more in firebug documentation
Select your element in the HTML tab, directly in the source.
Then, you can hover your page to toggle it.
In cases like this I sometimes alter the script slightly in order for the 'hidden' element to stay visible.
In this case, I would perhaps comment out/disable the script code which hides the element on blur. That way you can click the main element, and inspect the now visible item for as long as needed.
What about debuging with all the buttons visible? Or you can still find the elemnt in the HTML tree.
In Opera, you can use Dragonfly (Tools > Advanced > Developer Tools, or Ctrl+Shift+i) to solve this issue. When the tools are active, clicking on any part of the page will navigate to that section of the HTML side-by-side with its CSS.