I am using the Flex template and SPPage builder for my Joomla site. I have one annoying problem: When I resize the window to less than 1200 px, the navbar switches to two lines (e.g. iPad Pro horizontal). Only when I resize to 992 px, is the off canvas menu activated.

I would like to activate the off canvas menu already at 1200 px to prevent the two line navbar. I have googled around and found these lines in template.css:

@media (min-width: 1200px) {
  .sppb-row-container {
    width: 1170px;

I thought that this might control the behaviour that leads to the two line navbar, but it does not seem to do anything.

So my question is: How can I control the position/screen size where the off canvas menu appears?

  • Thank you for extending your Stack Exchange citizenship to our community. Please take our tour while you wait for support. – mickmackusa Oct 1 '20 at 10:55

I don't think this is a configurable item in the Helix Template Settings but you can add some custom CSS in the template settings like this or similar:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.