Menu buttons unconsistent

[Talking Stick Webmaster]

Hi,

Thanks for providing a free version of your theme.
I’m planning on to use it but there is one little thing… The drop-down menus are very inconsistent! They sometimes disappear when I move the mouse downwards to select one of them. I’m using chrome on Ubuntu, but this shouldn’t be the root cause of the problem since when I use your demo version on this website, everything is fine.
Any idea what’s going on here?
Thanks!
Talking Stick Webmaster

[iceable]

Hello,

The menu dropdowns are using javascript plugins (superfish and hoverIntent) to handle the sub-menu animations and avoid this exact issue. They also allow the dropdowns to stay open a a few milliseconds if your mouse accidentally moves out of the area and back in.

Knowing this, chances are javascript is broken on your site which prevents these plugin from doing their job and causes this issue.

I can have a look and confirm this (or see if there is something else going wrong) and help you figure out how to fix this if you wish to provide me with a link to your site!

[Talking Stick Webmaster]

This reply has been marked as private.

[iceable]

Well actually, there is no js error on your site and I did not have much trouble navigating through your menus.
But I did notice a subtle flickering when moving slowly the mouse between the menu button and the sub-menu that could be the cause of it. This comes from a 1px gap which you can fix (and hopefully fix the whole issue) by adding this at the end of style.css (you can edit it from Appearance > Menu) :

#navbar ul li ul { top: 40px; }

Also clear your browser’s cache to make sure there is no interfering junk when you re-test it !

[Talking Stick Webmaster]

Fixed!
Alright, you guys definetely have the fastest support ever… 🙂
Thank you so much!

[Talking Stick Webmaster]

Sorry but the bug is back again..
The only thing I’ve done is creating a child theme. And now both the parent and the child theme don’t work. I’m wondering if it has been fixed at all, maybe that was just luck..
Thanks for any tip.

[iceable]

Well since I couldn’t reproduce any more issue after this css fix I’m not sure what is causing this on your end, but there’s another solution which is simply disabling the jQuery plugins altogether.

As a result your menu will work with CSS only so it will consistently appear/hide when you mouse hover. You will loose the subtle opening animations but this will also get rid of any associated bug.

To do so you just need to remove a class from the menu in header.php on line 51:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '<ul id="%1$s" class="%2$s sf-menu">%3$s</ul>' ) ); ?>

Remove the sf-menu class so this line becomes:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>' ) ); ?>

[Talking Stick Webmaster]

Fixed! (with first solution..)
See this topic.
Thanks for the support!

[Author]

Posts