Solved

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

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

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 31 (31)

KetanKumar
Shopify Partner
36839 3635 11972

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

@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
Visitor
1 0 0

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
Excursionist
16 0 4

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

KetanKumar
Shopify Partner
36839 3635 11972

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ChuckD87
Excursionist
16 0 4
KetanKumar
Shopify Partner
36839 3635 11972

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 Partner | 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
36839 3635 11972

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
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!

KetanKumar
Shopify Partner
36839 3635 11972

@thesource 

sorry for this issue 

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

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
thesource
Tourist
4 0 4

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!

 

IMG_2022.PNG

KetanKumar
Shopify Partner
36839 3635 11972

@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;
}
}

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
thesource
Tourist
4 0 4

This code works, thank you so much!

KetanKumar
Shopify Partner
36839 3635 11972

@thesource 

it's my pleasure to help us

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ArtMementosTeam
Tourist
4 0 3

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 🙂

ArtMementosTeam_0-1623088635579.png

 

KetanKumar
Shopify Partner
36839 3635 11972

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

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ArtMementosTeam
Tourist
4 0 3

Thanks for getting back to me @KetanKumar !

 

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

And the password is "Lekotaka123"

 

Thanks again 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@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;
}

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ArtMementosTeam
Tourist
4 0 3

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
Shopify Partner
36839 3635 11972

@ArtMementosTeam 

thanks for your compliments

it's my pleasure to work with you

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dededus
Excursionist
30 0 9

Thanks.

dededus.net

KetanKumar
Shopify Partner
36839 3635 11972

@dededus 

thanks for url bt how can i help you?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
tigerlilycrafts
Visitor
2 0 1

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
Shopify Partner
36839 3635 11972

@tigerlilycrafts 

thanks it

i have cheked its workign fine what's issue?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nouha
Visitor
1 0 1

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

KetanKumar
Shopify Partner
36839 3635 11972

@Nouha 

Great Thanks for update

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
murtazahussain
Visitor
2 0 1

@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
menu.PNG

 

KetanKumar
Shopify Partner
36839 3635 11972

@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?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
murtazahussain
Visitor
2 0 1

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 ) 

Sugarforsheis
Visitor
1 0 0

Hi @KetanKumar ,

We are facing a similar issue with the submenu. Can you take a look into it? The URL is https://sugarforsheis.in/