menu items not showing up in mobile version while its showing on desktop version

[burhandar26]

when i open my store on desktop version my header menu items shows up but when i open it in mobile version my menu goes to side three lines and when i click on those three lines no menu items shows up how do i fix it ..

[vinh0225 · Accepted solution]

Hi @burhandar26 

Will you make me to see your issue?

[vinh0225 · Accepted solution]

Hi @burhandar26 

Will you make me to see your issue?

[burhandar26]

ok

[vinh0225]

Please let me know your shopify store URL like "xxx.myshopify.com" so that I can send a collaborator request.

[burhandar26]

i dnt think i need to add you in my store , but yes u can have a look on my store by my url and then can tell me the solution .

www.arhb.com.au

[burhandar26]

try and open it on mobile and u will see that u cant see my header menu items in header section 

[vinh0225]

@burhandar26 

I think that you have this code in assets/component-menu-drawer.css.

.menu-drawer {
    position: absolute;
    /* transform: translate(-100%); */
    /* visibility: hidden; */
    z-index: 3;
    left: 0;
    top: 100%;
    width: 100%;
    padding: 0;
    background-color: rgb(var(--color-background));
    overflow-x: hidden;
    filter: drop-shadow(var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) rgba(var(--color-shadow), var(--drawer-shadow-opacity)));
}

 Here, transform: translate(-100%); and visibility: hidden; are affecting. Please try to comment them.

[burhandar26]

should I remove this code from there ?

[vinh0225]

No, please make like this.

[burhandar26]

it was already like this there , so what i did was i removed this whole coding from there and now my menu items are showing in my mobile version as well ......so why doing opposite as u r telling me made it worked ?

[vinh0225 · Accepted solution]

Currently, I can see this.

But it looks a bit weird to me.
I rather like this:

If you like this, you need this code yet.

.menu-drawer {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 100%;
    width: 100%;
    padding: 0;
    background-color: rgb(var(--color-background));
    overflow-x: hidden;
    filter: drop-shadow(var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) rgba(var(--color-shadow), var(--drawer-shadow-opacity)));
}

I removed transform: translate(-100%); and visibility: hidden; only.

[burhandar26]

thank you so much brother  it worked  bundle of thanks