DHWP Offcanvas Menu has been revamped for 2025. Biggest change isn’t visual but is very important. Instead of “cloning” the Offcanvas element to below the body tag, the offcanvas element is now expected to live in the header. It will, however no longer be cloned. This is important because it means it won’t interfere with any JavaScript from our own or other Plugins/Blocks that we want to add to the Offcanvas menu.
Additionally, the “Navigation Selector” field was added.
What this does is lets you set a CSS selector for which element(s) you want to hide when the hamburger appears. Since it’s a CSS selector you could potentially hide anything on the page.
By default, it is set to automatically hide the Main Navigation.
No more “auto-width” detection on the menus. Combined with all the other features, and the fact that the header was editable, it was almost imposible to predict what parent elements the navigation would have, and therefor to predict if it had enough horizontal space or not.
We can however still set a mobile breakpoint manually, and when used with the above selector can achieve some pretty unique effects. I have this example setup to hide the sub_topbar of the Two Row Header, in addition to the Main Navigation.
Usage
- Add the Block wherever you want, but strongly recommend it being the right most element in the Row its contained in by default. Everything else around it in the header can change, but this should probably stay the same.
- Set your settings. I like to do a visual check for what screen width my current menu will wrap against the logo, then set that width in the Offcanvas settings.