Trying to make mobile drop down menu items 100% clickable

Solved
leilanijean72
Tourist
7 0 2

Hi there! 

 

I am working on a website with the Ella theme and want to find a way to edit the mobile menu. Currently you can only click the arrow for the dropdown menu to be activated, but I would like that the entire menu link block to be able to trigger the dropdown. Any help is appreciated! 

 

Screenshot attached: Black square is what you click currently, red is what I would like to be clickable 

 

Screen Shot 2021-05-24 at 9.19.03 AM.png

KetanKumar
Shopify Partner
23606 2375 8674

@leilanijean72 

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
0 Likes
leilanijean72
Tourist
7 0 2

Thanks Ketan! The url is www.tiarehawaii.com 

0 Likes
KetanKumar
Shopify Partner
23606 2375 8674

This is an accepted solution.

@leilanijean72 

Thanks for quick details please add this code

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

@media (max-width: 1199px) {
.site-nav .icon-dropdown {width: 100%;text-align: 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
leilanijean72
Tourist
7 0 2

That did the trick!! Thank you SO much! 

KetanKumar
Shopify Partner
23606 2375 8674

@leilanijean72 

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
0 Likes
nadatouma
Excursionist
14 0 2

I would love to do the same but on venture. how do I do it?

www.phoeniciangoods.fi

also is there a way to change the + into a visible arrow in both the burger menu and the desktop menu? 

KetanKumar
Shopify Partner
23606 2375 8674

@nadatouma 

yes please try 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-toggle-btn {
flex: 0 0 300px;
    text-align: right;
    margin-left: -90px;
}

 

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
nadatouma
Excursionist
14 0 2

OMG you are an amazing magician! thank you so much

sorry to bother you but what about the second question regarding the arrows?

0 Likes
DWard
Tourist
6 0 1

Hi any idea how to do this in the Brooklyn theme?

I've tried adding 100% width and right align to a few different classes around the mobile-nav__toggle but it's not working...

Thanks a lot!