(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 )

[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]

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

[Nouha]

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

[KetanKumar]

@Nouha

Great Thanks for update

[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