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)