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

Solved
rcrc
Excursionist
11 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

KetanKumar
Shopify Partner
16791 1835 6285

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
rcrc
Excursionist
11 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
ChuckD87
Excursionist
14 0 2

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

KetanKumar
Shopify Partner
16791 1835 6285

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
ChuckD87
Excursionist
14 0 2
KetanKumar
Shopify Partner
16791 1835 6285

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
rcrc
Excursionist
11 0 2

your code works thank you very much !

KetanKumar
Shopify Partner
16791 1835 6285

@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
thesource
Tourist
4 0 4

Hi, I'm having the same exact issue. I'd like to make the whole bar of dropdown menus clickable instead of just the arrows. I'm not sure if this is doable with my theme?

https://wethesource.com 

Any help appreciated, thanks!