Archived topic
Mobile Menu "full screen"
3 replies · Started by Davide on October 16, 2021
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
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;
}nice, thanks!
have a good day!
Davide
Glad to be of help!
