FROM CACHE - en_header

(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

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
35839 3584 11595

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 27 (27)
KetanKumar
Shopify Partner
35839 3584 11595

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

ChuckD87
Excursionist
16 0 4

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

KetanKumar
Shopify Partner
35839 3584 11595

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
KetanKumar
Shopify Partner
35839 3584 11595

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
KetanKumar
Shopify Partner
35839 3584 11595

@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
35839 3584 11595

@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
35839 3584 11595

@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
KetanKumar
Shopify Partner
35839 3584 11595

@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

 

Nouha
New Member
1 0 1

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

KetanKumar
Shopify Partner
35839 3584 11595

@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
KetanKumar
Shopify Partner
35839 3584 11595

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