error in shpoify menu bar in mobile version

English Shopify Technical Q&A
, ,
1

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
Screenshot_20240304_185410_Chrome.jpg268×340 9.71 KB

2

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.

3

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!

4

www.leadinglady.in

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

5

Hi brother,

Please help me with this.

I need to fix this on urgent.

Thank you!

6

www.leadinglady.in

7

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.