Mobile menu

Store Design
, ,
1

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.

2

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

3

Hey Roy,

Please check your email.

Thank you,

Kosta

4

HI @kosta_1

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;
}

​
5

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

6

@kosta_1 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.

7

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

8

edit- I sent you the preview link

9

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