- This topic has 11 replies, 3 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
How can I get the off canvas menu (for desktop only) to move down the page? Some CSS I would imagine.
It’s currently showing up right under my browser tabs.
Customer Support
Hi Clayton,
Not sure if I understand what you are looking for, try this CSS and let me know if I guessed it right 🙂
@media(min-width:1025px) { nav#generate-slideout-menu { top: 200px; } }Thank you Ying. That’s close, but I just want to push down the nav items and not the whole menu. It looks fine on mobile so I don’t want to change the mobile view.
I attached a link to a screenshot of what I mean.
Let me know if that makes more sense.
Thanks!
I see, try adding this CSS, feel free to change the numbers to position the close button.
@media(min-width:1025px) { .slideout-navigation.do-overlay .slideout-exit { margin-top: -138px; right: 35px; background-color: white; /*optional*/ } nav#generate-slideout-menu { overflow: visible; } }Thanks again Ying. That helped to push the close button down the page, but the menu titles are still stuck at the top of the window.
Did you remove the CSS I provided here? https://generatepress.com/forums/topic/push-down-off-canvas-menu-items-on-desktop/#post-2537367
Both CSS are required.
Unfortunately no luck. It’s still pushing down the semi-transparent off-canvas background rather than just the listed nav items. I used this CSS:
@media(min-width:1025px) {
nav#generate-slideout-menu {
top: 200px;
}
}
@media(min-width:1025px) {
.slideout-navigation.do-overlay .slideout-exit {
margin-top: 0px;
right: 35px;
}nav#generate-slideout-menu {
overflow: visible;
}
}It’s still pushing down the semi-transparent off-canvas background rather than just the listed nav items.
I thought you want the background to be pushed down based on your mockup screenshot:https://imgur.com/a/K1wtpjD
So you want the background still cover the entire page, just to pushdown the menu items?
Yes, I still want the off-canvas menu background to cover the entire screen, I just want to be able to move the menu items down the screen, rather than them being right at the top of the browser window. Being able to have control over the placement of the close button would be helpful too.
Mobile works great, it’s just desktop that I’m struggling with.
Thanks!
Customer Support
Hi there,
try this to add padding to the top of the menu:
.slideout-navigation.do-overlay .inside-navigation { padding-top: 40px !important; }That worked, thanks David. I used this combined with some of the other CSS provided by Ying to get the desired outcome.
Glad to hear that !
- You must be logged in to reply to this topic.
