Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 26, 2018 at 9:41 pm #1037780
    steadyradiance

    Hello,
    I use the hamburger menu for both my desktop and mobile versions. Is it possible to have the hamburger menu drop down on hover instead of on click on desktop? I still want it to drop down on tap on the mobile version.

    Thanks!
    Jessica

    November 27, 2018 at 7:55 pm #1038170
    Victoria

    Hey jwyderko,

    Here is a thread for you to consider

    Opening Burger Menu on hover

    If you need further assistance please let us know.
    Best regards,
    Victoria

    November 28, 2018 at 12:43 am #1038296
    steadyradiance

    Thanks for the link. I added the CSS to the functions file and updated the JS, but I have the same problem that @guenni007 had. When I hover over the hamburger icon it opens the menu, but as soon as I move my mouse off of the icon (to click on a menu item) the menu closes. What do I need to change so the menu stays open while the mouse is hovering inside the active menu?

    Thanks!

    December 3, 2018 at 5:37 am #1040115
    Ismael

    Hi,

    Where are you testing it? Have you read this post? Toggling the mobile menu on hover won’t work nor it makes sense because mobile phones don’t have a hover state.

    // https://kriesi.at/support/topic/opening-burger-menu-on-hover/#post-764580

    Best regards,
    Ismael

    December 5, 2018 at 1:25 am #1041026
    steadyradiance

    I tested it on my live site on a desktop/large screen, but I have since removed the code because I couldn’t access my menu (since it collapses when you’re not hovering over the hamburger icon).

    And yes, I read that post – it’s the same one suggested by Victoria. If you read my original question, you’ll see that “I still want it to drop down on tap on the mobile version.” I’m looking for a way for the hamburger menu to drop down on hover on desktop/larger screens only.

    Please let me know if there’s a way to modify the CSS and/or JS to make this work for me.

    Thank you.

    December 5, 2018 at 6:00 am #1041075
    Ismael

    Hi,

    I was referring to this reply:

    I think it’s possible but I don’t think will serve much purpose since smaller devices which the burger menu shows up are either mobile phones or tablets where you don’t really have a hover.

    Mobile phones don’t have a hover state, so what you’re after is not possible.

    Best regards,
    Ismael

    December 5, 2018 at 8:49 am #1041097
    steadyradiance

    The site I’m working on has the burger menu showing on all screen sizes (http://www.betweentime.org), so it does show up on screens that have a hover state.

    So, is it possible to get the burger menu to drop down on hover on desktop/larger screen sizes?

    TYIA!

    December 6, 2018 at 11:47 am #1041573
    Ismael

    Hi,

    Alright. You can try this script in the functions.php file:

    add_action('wp_footer', 'avf_trigger_menu_on_hover');
function avf_trigger_menu_on_hover(){
?>
<script type="text/javascript">
(function($) {
	$('.av-burger-menu-main a').on('mouseover', function() {
		$(this).trigger('click');	
	});
})(jQuery);
</script>
<?php
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.