How can I adjust mobile menu dimensions for optimal visibility?

[Kostas_katal]

Hello,

I would like your help with an issue that is bothering us

We have made our online store exactly how we wanted it to look,

The main problem we want to solve now is that,

When I'm on mobile, and open the menu, the banner continues to appear,

I would like the menu to appear 100% of the height and 50% of the width of the screen, above all,

Any solutions?

Site: https://www.petjoyfully.com

[topnewyork]

Go customize > edited code > header.liquid and past this code

div#menu-drawer {
    height: 50vh !important;
}

[PageFly-Henry · Accepted solution]

Hi @Kostas_katal 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

@media (max-width: 767px){

div#menu-drawer {

    width: 60% !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[Kostas_katal]

Hi,

It seems that the width is ok now, but the header still apear above the menu cart