How To Control When Menu Converts To Off-canvas - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

How To Control When Menu Converts To Off-canvas

MH

Matt Hunt

Helix Framework 3 years ago

Hi, I'm using the preset headers of Helix Ultimate on several websites, but they all have the same issue. The menu will look good in the expanded desktop view and on mobile devices, however there is a width range where the menu is pushed down into the content outside of the header.

How can I either make the header height responsive to expand with the placement of the menu, or have the off-canvas menu show sooner?

0
4 Answers
Order by
Oldest Newest Votes
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #54977

Hi there,

Thanks for contacting us. Sorry for the inconvenience. Will you please share an screencast video about the full scenario?

-Thanks

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #54978

Hello Matt Hunt

Please use this CSS to Template Options -> Custom Code -> Custom CSS

@media (max-width: 1200px) {
#offcanvas-toggler {display: block !important;}
#sp-menu .sp-megamenu-parent {display: none !important;}
}

Best regards

0
MH
Matt Hunt
Accepted Answer
3 years ago #81697

Hi, I've another site thats giving me troubles. It has a wide menu/logo so I'm using the following code, but the hamburger menu is not showing up until the width drops below 1000px, so I've got no menu between 1000px and 1400px. Please advise. https://selfdirectionme.org/

@media (max-width: 1400px) {
#offcanvas-toggler {display: block !important;}
#sp-menu .sp-megamenu-parent {display: none !important;}
}
0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #81724

Add this code inside the custom.css file to show off-canvas menu for tablet device. 

@media (max-width: 992px) {
#sp-header #offcanvas-toggler.offcanvas, #sp-header #offcanvas-toggler.mega {
    display: flex !important;
}
}
0