Need help with a hover dropdown.

I have the dropdown menu on my website, and when I hover on the menu, the dropdown appears, but I don't want the drop down when I hover on the word, I made an arrow for drop down. I need it to appear when I just hover over the arrow. https://static.livechatinc.com/8801096/P7MU8B7SHK/fc3524d75966cf5932213a5fe9e7309b/supportenovate.jpg

  • Dimitris

    Hey there Shaan,

    hope you're doing good today! :slight_smile:

    This is a bit tricky, as we have to deal with some limitations.
    First of all, we can't just target the hover of this icon, as it's used inside the menu link using the ::after pseudo-class.
    https://www.w3schools.com/cssref/sel_after.asp
    Also, if you have this UI, then your users should hover over an icon which is 8x8px, which is way too small.

    Beside that, you could create a workaround on this, but still has some limitations and some more custom work should be made on it. I can help you start it though and if this is kind of what you need, then you can hire a developer to fine-tune this for you. :slight_smile:
    CSS

    /* hide default hover effect and icon*/
    div.upfront-navigation div[data-style=horizontal]:not([data-style=burger]) li.menu-item:hover>ul.sub-menu,
    div.upfront-navigation div[data-style=horizontal]:not([data-style=burger]) li.menu-item.menu-item-has-children>a::after{
      display: none;
    }

    JS

    (function($) {
      /* add a custom icon after parent menu item*/
    	$("div.upfront-navigation div[data-style=horizontal]:not([data-style=burger]) li.menu-item.menu-item-has-children>a").append(" <span class='menu-hover'>(i)</span>");
    
      /* display sub menu on hover of this item */
      /* on hover-out though, sub menu is getting vanished, this would need some further investigation/development, which surpasses the scope of our support */
    	$("div.upfront-navigation div[data-style=horizontal]:not([data-style=burger]) li.menu-item > a > span.menu-hover").hover(function(){
        	$(this).parent().parent().children("ul.sub-menu").css("display", "block");
        }, function(){
             $(this).parent().parent().children("ul.sub-menu").css("display", "none");
    	});
    })( jQuery );

    For trying these out, you can use this handy plugin: https://wordpress.org/plugins/custom-css-js/

    Hope that was some help!
    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.