Navbar: prevent two lines on smaller screens

Question

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?

Answer 1

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