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

[rcrc]

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...

please what to do to solve this ?

Thank you very much

Roberto

[KetanKumar]

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. 

[rcrc]

@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 🙂 )

[ezzatkal]

I am facing the same issue, I need the sub menu to collapse without clicking on just the arrow, my store is www.sadeenco.com 

[ChuckD87]

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

[KetanKumar]

Hello, @ChuckD87 
Thanks for post

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

[ChuckD87]

@KetanKumar 

https://animalpride.com/

[KetanKumar · 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);
}

[rcrc]

your code works thank you very much !

[KetanKumar]

@rcrc 

Thanks for your update and your complimetns.

[thesource]

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!

[KetanKumar]

@thesource 

sorry for this issue 

can you please share video or screenshot further issue so i will guide you

[thesource]

Hi again, I sent you a private message but not sure you received it. I still need help with this if possible! Customers don't understand to click arrow to get dropdown menu so I want to the whole bar to be clickable and bring up the dropdown when clicked. 

Thank you!

[KetanKumar]

@thesource 

thanks for the details can you please try this 

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 767px) {
.mobile-nav__toggle {
width: 100%;
    position: absolute;
    left: 0;
    text-align: right;
}
.mobile-nav__toggle button {
    float: right;
}
}

[thesource]

This code works, thank you so much!

[KetanKumar]

@thesource 

it's my pleasure to help us

[ArtMementosTeam]

Hello Ketan!

I'm having a similar issue. I'd be really grateful if you could help me out with this.

Currently, the pages under "Posters" open on mobile devices only when you click on the "+" icon. I would like to have it set up so that when users click on the word "Posters" the additional pages show up. I've attached a screenshot, hope it helps you get a better idea.

I'd really appreciate any advice you can give me about this 🙂

[KetanKumar]

@ArtMementosTeam 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[ArtMementosTeam]

Thanks for getting back to me @KetanKumar !

This is the URL: https://artmementos.com/

And the password is "Lekotaka123"

Thanks again 🙂

[KetanKumar]

@ArtMementosTeam 

thanks for detail please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.drawer__nav-link--top-level + .drawer__nav-toggle-btn {
    position: absolute;
    width: 98%;
    height: 58px;
    text-align: right;
    left: 0;
}

[ArtMementosTeam]

Thank you very much @KetanKumar!

It works perfectly now 🙂

I appreciate it and I will most likely hire you to assist me with certain issues I'm facing with the theme in the future.

Thanks again!

[KetanKumar]

@ArtMementosTeam 

thanks for your compliments

it's my pleasure to work with you

[dededus]

Thanks.

dededus.net

[KetanKumar]

@dededus 

thanks for url bt how can i help you?

[tigerlilycrafts]

Hi Ketan! Sorry to jump on with the requests but I could really use this fix if you are able to do it for my site please?

www.tigerlilycrafts.co.uk

We're having a problem with the arrows not aligning - being able to have the dropdown open with the text and not just the arrows would be the perfect fix!

[KetanKumar]

@tigerlilycrafts 

thanks it

i have cheked its workign fine what's issue?

[Nouha]

It Works !!! Finally !! Thank you sooo much 😄

[KetanKumar]

@Nouha 

Great Thanks for update

[murtazahussain]

@KetanKumar 

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.

This is the URL:  https://expostore.pk

[KetanKumar]

@murtazahussain 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

[murtazahussain]

I want to direct the text to the collection I assigned on it. which is working fine on the desktop preview but not working on the mobile view ( if I click the text on the menu it will dropdown the whole menu instead of directing me to the collection I specially assigned to that specific text )