Hi there!

Thanks for contacting us.

The Helix ultimate and the SP Page Builder latest version both are using/following the Bootstrap 5 breakpoints.

Related info:

https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/introduction#span-class-h3-container-width-span

https://prnt.sc/sTSxhlnrj3Xg

https://getbootstrap.com/docs/5.0/layout/breakpoints/

Helix Ultimate is based on Bootstrap5 - so it uses this same breakpoints. But those are used ONLY for columns in Rows Layout. More details here (at the bottom): https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/layout-builder

and SPPB uses those same but it has only for Mobile / Tablet.

-Regards.

Thanks for the quick response. I know these documents and I've read through the SPPB documentation, but I cannot work out how to modify the breakpoint for the menu on mobile devices. What elements need to be specified in my custom.css to make the hamburger menu appear on smaller devices, such as

@media screen and (max-width: 768px) { .... { } }

Hi Ludwig.

Try this code

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

Hi Pavel,

many thanks for trying to help. I should have mentioned, that I'm using a 3rd party template, which is based on Helix Ultimate, but obviously uses different styling options. But your input gave me the right hints where to look at and I could figure it out for myself. Here is the solution, in case somebody searches here for the same issue:

@media (max-width: 767px) { 
    .uk-hidden\@m { display: block !important; }
    .uk-visible\@m { display: none !important; } 
    }
@media (min-width: 768px) {
    .uk-hidden\@m { display: none !important; }
    .uk-visible\@m { display: block !important; }
    }