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?
Hi there,
Thanks for contacting us. Sorry for the inconvenience. Will you please share an screencast video about the full scenario?
-Thanks
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
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;}
}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;
}
}