BROADCAST THEM: Mobile dropdown menu only appears when clicking the arrow pointing down

Chwhis
New Member
7 0 0

Hi,

I'm using the broadcast them and the mobile menu - dropdown - only appears when clicking on the arrow symbol. I would like it to display when i click on the text "Shop" for example.

Hope someone can help! Thanks

0 Likes
Chwhis
New Member
7 0 0

Hi, can anyone offer some help on this. Been trying everything  on the code but have had no luck. I have managed to make this work but the children then are not linkable any longer.

0 Likes
The-Fresh-Lab
Shopify Expert
10 0 2

Hi Chwis.

Having updated this for a client, I can confirm the following works.  Add this to either a custom .css file in your theme, or edit the theme.scss.liquid file (I always keep custom CSS separate from the main theme css for manageability and for future upgrades to the theme)

@media only screen and (max-width: 749px) {
  .nav-carat {
    width:100%;
    transform:none;
    justify-content: flex-end;
  }
  .nav-carat .icon-arrow-right {
    transform: rotateZ(90deg);
  }
  .nav-carat[aria-expanded="true"] {
  	transform:none;
  }
  .nav-carat[aria-expanded="true"] .icon-arrow-right {
    transform: rotateZ(270deg);
  }
}

 

This code essentially increases the clickable area of the drop down arrow so that it covers the title link.  therefore when clicking the link, you are actually still clicking the toggle button.

I hope this helps. 

 

0 Likes
Chwhis
New Member
7 0 0
Thanks so much for this, but I had ended up finding a work around.
0 Likes
The-Fresh-Lab
Shopify Expert
10 0 2

no problem at all - realised it was a little late but figured you still may need it.

It may be helpful for others.

0 Likes
Chwhis
New Member
7 0 0
Definitely will be and thanks so much for letting me know!
0 Likes