[Resolved] Possible to resize off-canvas menu on desktop?

[lunatrix]

I am trying to achieve something similar to the hamburger menu on nichepursuits.com

I have my menus and widgets set up the way I want, but would like for the menu to not cover the whole page when it’s desktop.

[Elvin]

Hi,

You can try adding this CSS:

@media(min-width:769px){
nav#generate-slideout-menu.do-overlay{
width:fit-content;
}
}

This changes the width on desktop(and some tablet) viewports so it doesn’t cover the whole page.

[lunatrix]

I’m close. I couldn’t use fit-content because I was getting an invalid attribute error. Here’s where I am so far, but the menu is jammed up in the upper left corner of the screen:

@media (min-width:769px) {
.slideout-navigation.do-overlay {
width: min-content;
height: 300px;
}
.slideout-navigation.do-overlay .inside-navigation { padding: 0; }
}

Also, the close ‘X’ is in the wrong place.

[Elvin]

I’m close. I couldn’t use fit-content because I was getting an invalid attribute error. Here’s where I am so far, but the menu is jammed up in the upper left corner of the screen:

Change the width value to a fixed px value or percentage value so the things contained in it have enough space to not looked “jammed”.

Also, the close ‘X’ is in the wrong place.

Can you specify where you want it to be placed? By default, it goes to the upper right of its container but we should be able to change that with CSS as well. Let us know. 😀

[lunatrix]

Thanks for the reply. Upon further investigation, I just turned off the hamburger menu on desktop 🙂 I really don’t need it at this point, and I’m happy with the way I now have my menus configured.

Cheers!

[Elvin]

Nice one! Glad you got it sorted.

No problem. 😀

[Author]

Posts