(Supply theme) On mobile, make the whole menu bar clickable, not just the arrow icon at the end

Solved
Highlighted
Tourist
4 0 2

Hello,

On mobile, how to make the whole menu bar clickable and not just the arrow icon at the end ?

I let friends try the menu bar on mobile and they were ALL triying to click on the text-menu intuitively and not on the arrow, they were confused it didn't open the dropdown menu...

Now only the arrow (in yellow) opens the menu but I want the whole zone (in red) to be clickable...

 

Capture.JPG

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

please what to do to solve this ?

Thank you very much

Roberto

1 Like
Highlighted
Shopify Partner
7666 1055 2667

Hello, @rcrc 
yes, it's possible. but some code customization required, so it's possible to share your store login details otherwise send your live store URL than i will my Shopify partner account. 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 0 2

@KetanKumar  what ? you want my login credentials ? LOL

You can just create a dummy store with supply theme with a dropdown menu and test yourself by editing the code ;)

(i am developper so i will understand in case you tell me what to do :) )

0 Likes
Highlighted
Excursionist
13 0 2

I am looking to solve this as well. Can anyone help? Using Supply Theme.

1 Like
Highlighted
Shopify Partner
7666 1055 2667

Hello, @ChuckD87 
Thanks for post

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
13 0 2
Highlighted
Shopify Partner
7666 1055 2667

This is an accepted solution.

can you please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file

.mobile-nav li {
position: relative;
}
.mobile-nav--has-dropdown .icon-arrow-down {
    position: absolute;
    width: 100%;
    text-align: right;
  	-ms-transform: none;
    -webkit-transform: none;
    transform: none;
}
.mobile-nav--button.nav-active:before {
    color: #fff;
    position: absolute;
    right: 17px;
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
2 Likes
Highlighted
Tourist
4 0 2

your code works thank you very much !

1 Like
Highlighted
Shopify Partner
7666 1055 2667

@rcrc 

Thanks for your update and your complimetns.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes