Make Dropdown Menu Button Clickable and Menu Hover (05.19)

Highlighted
New Member
5 0 0

Hi Shopify forums,

I would like to make all of the dropdown menu buttons (e.g. Bandage Dresses, Leggings etc.) clickable and linking to their respective collection. Currently, they only serve as pluses for the dropdown menus even though I set up links for them in the main menu. I would like the people to access the dropdown menu by simply hovering over the buttons instead of clicking them. This is the link to the website: https://bella-moda-store.myshopify.com and the password is btg24!!  The theme is Symmetry and the preset is Salt Yard. Thank you.


Best Regards,

Rosen Toshev

 

Clickable Dropdown Menu Button

0 Likes
Highlighted
Astronaut
1890 1 431

It seems like it will be difficult to adjust this theme to handle cursor hovering.

There's an alternative approach with a quick solution, if you're willing to go this route.  The dropdown menus will still expand on click.  Clicking on the button again (while the dropdown menu is expanded) will take the viewer to the respective link.  Follow the steps below to acheive this.

Open Assets/main.js.  Look for the following section of code and add in the indicated lines.

        //Are we expanding or collapsing
        if($(this).hasClass('expanded')) {
          //Go to link if menu is expanded.                // add this line
          window.location = this.href;                     // add this line
          //Collapsing. Reset state
          $(this).removeClass('expanded').find('.exp').html('+');

 

1 Like
Highlighted
New Member
5 0 0

Thank you, Alex. This doubleclick code worked very well and is highly appreciated.

0 Likes
Highlighted
New Member
5 0 0

Hi Alex,

While the code that you sent me works great on desktop, it doesn't work on the mobile version of the theme. Do you know how I can set up the menu so that the respective collection page appears after the user taps two times on the button on mobile as well? Thank you.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
60 0 14

Hey Rosen,

Trey here from Shopify!

To have Alex's suggestion take effect on mobile devices as well, you'll want to make a similar update to the following part of the Assets/main.js file:

 

      //Mobile main nav?
      if($(this).closest('#main-nav').length == 1 && $('#main-nav').css('position') == 'fixed') {
        if($(this).parent().hasClass('mobile-expanded')) {
          //Go to link if menu is expanded.                // add this line
          window.location = this.href;                     // add this line
          $(this).siblings('ul').slideUp(navAnimSpeed, function(){
            $(this).css('display','').parent().removeClass('mobile-expanded');
          });

This will make it so that someone can tap on the link a second time to be redirected to the respective collection page (Dresses for instance).

Hope that helps :)

 

Trey S
support@shopify.com

0 Likes
Highlighted
Shopify Partner
3 0 0

Hi All,

 

Looking to get the same solution but for Debut theme. Any info on what needs to be added for Debut theme.

 

I couldn't find this file for the Debut theme.

 

Thanks in advance,

0 Likes
Highlighted
New Member
2 0 0

Hi

Thank you for the code. Unfortunately our theme does not have asset/main.js.

Do I create a new asset or add in another file?

 

Any advise would be appreciated!

 

Thank you

0 Likes
Highlighted
New Member
2 0 0

Hi Alex

Thank you for the code. Unfortunately our theme does not have asset/main.js.

Do I create a new asset or add in another file?

 

Any advise would be appreciated!

 

Thank you

0 Likes