Push down off canvas menu items on desktop

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.

https://imgur.com/a/BIgrOm3

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;
}
}

https://imgur.com/a/K1wtpjD

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!

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 !