Mobile menu

[kosta_]

Hello,

I was wondering if there’s is a way for the menu to open downwards on mobile. Right now, when I click on the menu, it opens from the side and hides half the page. I want the menu to open downwards, right under my header, and possibly to not take much space as there’s only 1 item on the menu. The rest is blank.

Thank you for any advice.

[Roy-ロイ]

Hey there!

Thanks for reaching out! I'd love to help you get that menu to open downwards on mobile. Could you share your website link with me? That way, I can take a look and give you some specific guidance.

Looking forward to helping you out!

Cheers,
Roy

[kosta_]

Hey Roy,

Please check your email.

Thank you,

Kosta

[Roy-ロイ]

HI @kosta_ 

I have received the email with the website.

Please follow the steps below and let me know if it fulfills your requirements.

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme that you want to edit, and then click ... > Edit code.

3. Search this file name "theme.css"
4. Paste the below code at the end of the file. 

#shopify-section-header {
    position: relative;
    z-index: 30;
}

.drawer__contents {
    padding: 18px 0;
}

.drawer {
    position: absolute;
    top: 75%;
    height: fit-content;
    width: 100vw;
    left: 0;
    right: 0;
    max-width: unset;
    opacity: 0;
    transition: all .25s cubic-bezier(.165,.84,.44,1);
}

.drawer--left.drawer--is-open {
    display: block;
    transform: unset;
    transition-duration: .45s;
    top: 100%;
    opacity: 1;
}

.drawer__fixed-header,
.mobile-nav__social:empty {
    display: none;
}


​

[kosta_]

Hey Roy,

I posted it under theme.css.liquid (as i don't have a theme.css).

When I try opening the menu, there's a foggy like appearance over the whole page. However, it does seem like it opens downwards like I want it to, but I can't see the menu at all. All I see it a thin white layer (foggy-like) over my whole main page.

Thank you,

Kosta

[Roy-ロイ]

@kosta_ That's weird. Could you please help me out with the URL of the preview link if you have tested it there. So that I can check if the code's been placed correctly and fix any issues. 

[kosta_]

On the preview I can see the menu, however, under the page the foggy appearance still appears.

On the phone, I can only see the foggy appearance, not the menu.

If you have access to a phone try searching the website from there so you can see if you're having the same issue as me.

In the meantime, I will try getting the preview link so I can send it to you.

I forgot to mention, I'm using gempages (not sure if that makes a difference, as the footer and header come directly from my theme and not gempages)

Thank you so much,

Kosta

[kosta_]

edit- I sent you the preview link

[kosta_]

Still haven't figured this out, any help is appreciated.