Archived topic
Mobile menu dropdown below navbar
7 replies · Started by Sandeep on March 26, 2021
Hello,
How can I make my mobile menu look like this using GP Premium 1.12.3:
For my desktop mode, I followed the answer on this ticket: https://generatepress.com/forums/topic/slide-out-menu-from-top-instead-of-leftright/
The slideout from top is working well, but the close button is hidden. I tried some z-index property, but cant quite get the my desired position.
I would like the close button to be above the menu lists.
Pls check the attached URL
Thanks.
Hi there,
if you can disable the Off Canvas then ill take a look at the site to see what CSS is required to create that style.
Hi David, I have disabled the Off Canvas menu. If required, I can create Admin account for you also.
OK - try adding this CSS:
@media(max-width: 768px) {
/* Fix mobile navigation and position off canvas */
.site-header.has-inline-mobile-toggle #site-navigation {
position: fixed;
width: 100%;
margin-top: 0;
top: 60px !important;
right: 0;
top: 93px;
/* height of site header */
height: calc(100vh - 53px);
padding: 30px;
z-index: 1000;
transform: translate3d(100%, 0, 0);
transition: transform 0.3s ease-in-out;
background-color: #f3f3f3;
}
/* Translate navigation on cavas on mobile toggle */
.site-header.has-inline-mobile-toggle #site-navigation.toggled {
transform: translate3d(0, 0, 0);
}
/* Force sub menus open */
.main-navigation.toggled .main-nav ul ul {
position: relative;
top: 0;
left: auto !important;
right: auto !important;
width: 100%;
pointer-events: auto;
height: auto;
opacity: 1;
display: block;
visibility: visible;
float: none;
padding-left: 10px;
}
/* Remove sub-menu toggles */
.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
/* add Borders to menus and remove item padding */
.main-navigation .main-nav ul li a {
padding: 0;
border-bottom: 1px solid #ccc;
}
/* Stop body scroll on menu open */
.mobile-menu-open body {
overflow: hidden !important;
}
}Hi David, the Mobile menu works fine.
Now, I enabled the Off canvas menu only for desktop. How can I put the closing button (x) on top of the menu list. Something like this:
In the Off Canvas Panel options you can set Close Button to Inside.
But you have some CSS that is adjusting the position of the off canvas which needs to be adjusted to make sure it remains in view.
Thank you, David. Awesome support. Didn't know that option was there. Now it works fine.
Glad to be of help!
