Solved

error in shpoify menu bar in mobile version

LeadingLady
New Member
5 0 0

Hi,

Please help,

I am facing an error in shopify menu bar in mobile version. I cannot able to click or its not clickable , not working.  Please help 

Screenshot_20240304_185410_Chrome.jpg

Accepted Solution (1)

Developer-G
Shopify Partner
3079 604 856

This is an accepted solution.

Most of the time this error occurs due to JS conflict.
A simple solution revert the changes you did recently.
btw please share the store URL so I can confirm. 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 6 (6)

Developer-G
Shopify Partner
3079 604 856

This is an accepted solution.

Most of the time this error occurs due to JS conflict.
A simple solution revert the changes you did recently.
btw please share the store URL so I can confirm. 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
LeadingLady
New Member
5 0 0

www.leadinglady.in

 

Thank you brother so much. I would be grateful if you help me out with this.

 

LeadingLady
New Member
5 0 0

Hi brother, 

Please help me with this. 

I need to fix this on urgent.

 

Thank you!

LeadingLady
New Member
5 0 0
Developer-G
Shopify Partner
3079 604 856

Edit component-menu-drawer.css under assets
Replace this css 

.menu-drawer {
    position: absolute;
    transform: translate(-100%);
    visibility: hidden;
    z-index: 10;
    left: 0;
    top: 100%;
    width: 30rem;
    padding: 0;
    border-left: 0;
    background-color: var(--color-background);
    overflow-x: hidden;
    border: 1px solid var(--color-base-border);
    border-radius: 0 0 5px 5px;
    z-indexwebkit-border-radius: 5px 0 0 5px;
    -khtml-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
}

with this one

.menu-drawer {
    position: absolute;
    transform: translate(-6%);
    visibility: visible;
    z-index: 10;
    left: 0;
    top: 100%;
    width: 30rem;
    padding: 0;
    border-left: 0;
    background-color: var(--color-background);
    overflow-x: hidden;
    border: 1px solid var(--color-base-border);
    border-radius: 0 0 5px 5px;
    z-indexwebkit-border-radius: 5px 0 0 5px;
    -khtml-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
}

 

 

And within same file replace this css 

.js details[open]:not(.menu-opening)>.header__icon--menu .icon-hamburger {
    visibility: visible;
    opacity: 1;
}
.js details[open]:not(.menu-opening)>.header__icon--menu .icon-close {
    visibility: hidden;
}

 

with this one

.js details[open]:not(.menu-opening)>.header__icon--menu .icon-hamburger {
    visibility: hidden;
    opacity: o;
}
.js details[open]:not(.menu-opening)>.header__icon--menu .icon-close {
    visibility: visible;
}

 

 

Note: Make sure to take a backup before making any change in css file.   

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

LeadingLady
New Member
5 0 0

Anyone my brothers and sisters, please help, the menu is not clickable, i am trying to click and see the menu, the menu is not opening or is someone disabled or not working.

Please help how can i enable or make the menu clickable again?

 

Help!!.

Thank you!