Venture theme megamenu hover open/close

New Member
4 0 0

I have found a fair amount of information on making my nav menu activate on hover.  

 

My question is, how to make the menu collapse as you mouse away from the menu?  With the menu opening with every pass of the mouse, its annoying to try and click on anything above the nav menu (not that there is a ton above the menu).

 

How is this solved?  An example would be savicustoms.com menu.  It has a very nice open/close feature as you pass over it. 

 

Assuming that doesn't work.  How do you get the menu to simply close when clicking on it again?  I have to add the menu button link as the  collection I want shown in the mega nav so that is the reason for the second click taking the user to that collect, but how do you disable that and still keep the look of the mega nav with the collection images?  This must be something in the coding I'm sure.

0 Likes
Shopify Partner
1657 278 347

If you want to open and close your menu on hover with collapse then you have to add css base on your current menu and need to change some structure code if not base on collapse. You can use :hover css for that, this is about  development task so we can not just give 100% solution from just console,

send me your store url i will check. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
4 0 0
gingerdynamics.com
0 Likes
Shopify Partner
1657 278 347

Follow this:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.js->paste bellow code in bottom of file

$(document).on('mouseover','.site-nav__item',function(){
    $('.site-nav__link').removeClass('meganav--active');
    $('.site-nav__dropdown').removeClass('meganav--active');
    $(this).find('.site-nav__link').addClass('meganav--active');
    $(this).find('.site-nav__dropdown').addClass('meganav--active');
})

$(document).on('click','body',function(e){
     var container = $(".site-nav__dropdown");
    if (!container.is(e.target) && container.has(e.target).length === 0) {

        $('.site-nav__link').removeClass('meganav--active');
       $('.site-nav__dropdown').removeClass('meganav--active');
     }
})

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
1 Like
New Member
4 0 0

That works to open.  How to get it to close when you mouse away from the nav menu?

0 Likes
Shopify Partner
1657 278 347

When you click out side of nav menu it will close.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Tourist
28 0 0

It docent close when u click outside the menu, it only closes when u click on another item in the menu. Can u help fix this

0 Likes
Shopify Partner
1657 278 347

Hi @ronan19m 

Send me you store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Highlighted
New Member
4 0 0

This is what I have done to achieve the mega menu from opening and closing on hover as you move the mouse over and away. 

--

Name your asset “expertshopify.js”.  Click on expertshopify.js to open the asset in the online code editor.  Copy the content of this:

 

$('.site-nav__item').hover(function(){

   console.log("triggered");

$(this).children('a').addClass('meganav--active');

   $(this).children('div').addClass('meganav--active');

},

                                    function(){

   $(this).children('a').removeClass('meganav--active');

   $(this).children('div').removeClass('meganav--active');

})

 

Include your asset in theme.liquid

Still on the Edit HTML/CSS page in your shop admin, click on theme.liquid under Layouts to open the layout in the online code editor. Scroll to the bottom of the file and just above the </body> tag add the following code:

 

<script src=” {{ ‘expertshopify.js’ | asset_url }} “></script>

</body>

 

Add jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>


    

 

0 Likes
Tourist
28 0 0