[Resolved] Mobile Menu “full screen”

[Davide]

Hi GP Team!

I created one mobile menu following this —> https://docs.generatepress.com/article/using-a-different-menu-on-mobile/
everything’s fine.
Is it possibile to have it cover the 100% of the screen when opened? Somehow like an “off canvas panel”.
(I had to use the mobile menu in order to leave the menu bar and logo showing).

I tried with

#menu-mobilede {height: calc(100vh - 60px);}

but the menu points are being “stretched out” too to cover the entire screen (and not only the background)
https://www.dropbox.com/s/sdmzy4pysi82632/Screenshot_2021-10-16_11-54-04.jpg?dl=0

Is there a way to have only the background covering the entire device’s screen, leaving the menu points .. like they are?

thanks!
Davide

[David]

Hi there,

remove your current CSS, and try this to add an overlay behind the menu:

#mobile-header.toggled .main-nav > ul {
    position: relative;
}
#mobile-header.toggled .main-nav > ul:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: calc(100vh - 60px);
    width: 100%;
    background-color: #2d2d2d;
}

[Davide]

nice, thanks!

have a good day!
Davide

[David]

Glad to be of help!

[Author]

Posts