Impulse Theme - Mega Menu Click vs Mouseover

[beenenm]

Hey all. I have what I'm hoping is a simple issue to resolve. We're currently using a mega menu but are getting feedback from users that the mouseover menu expansion is detracting from the overall browsing experience.

I'd like help changing this behavior to a click vs. mouseover action, which fills the entire page unexpectedly.

https://builtrightind.com/

Regards!

Matt

[PageFly-Victor · Accepted solution]

Hi @Beenenm,

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at bottom of the file -> Save

<style>
.is-focused>.site-nav__dropdown{
    visibility: hidden !important;
}
.is-activeLink>.site-nav__dropdown{
 visibility: visible !important;
}
</style>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded',(event)=>{
$('.site-nav--has-dropdown').each((_,item)=>{
   $(item).on('click',(e)=>{
    e.preventDefault()
    $('.site-nav--has-dropdown').each((_,i)=>i.removeClass('is-activeLink'))
    $(item).addClass('is-activeLink')
})
})

});
</script>

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[beenenm]

That helped - thank you!

[OMGraphics]

Hey Victor,

Your solution does make the menu work on click, but the items in the menu won't open when clicked now. 
What I mean is that I can now click on the main menu element to display the sub-menu, but the elements in the sub-menu are not clickable.

Do I need to change something?