10+ Header, Mega Menu & Other Updates to Power Up Your Web Design

These include showing and hiding your header per device and per page, header overlap effect per screen size, saving and reusing headers as sections, adding multiple sections to your header, and a more organized design panel to manage it all as you work.

Set your header or footer to show or hide from any device or page

That’s right. You can set the header and footer (separately) to show or hide from any device view, and from any or all your site pages. In other words, you get full customization power over your site’s header and footer’s visibility.

To hide the header or footer, right-click it and select the Hide From option. To show a now-hidden header or footer, find them in the layers panel, and click the visibility icon to show them on the desired page or device.

Make a visual impact with a header overlapping effect - per device

Create a bold, immersive first impression in your site by setting your header to overlap with the top section of that page for each of the different device sizes. This effect is especially impressive when the top section has a large background image or video.

In addition, overlapping the header with the top section can reduce vertical space taken by the former, which is useful on mobile or smaller screens. Look for the new Header Overlap area in the design panel when your header is selected to enable it.

Save your mega menu as a section

We’ve made it possible to save the mega menu as a section, plus the option to add a designed section to the header and/or your mega menu. This means you can reuse your header or mega menu assets later on in other sites or projects you’re working on.

Adding sections to your mega menu - what’s in it for you?

Use it for more complex designs and layouts, like having one section for the title and another for showing a gallery of images or block sets of image + text + button, or a separate section for a CTA that appears below a gallery or list. The possibilities are virtually endless.

Seamless per-device visibility control over elements

We’ve made it easier to set any element to hide from any device view, even if the view you’re currently working on in the editor is different from the one you want to change it for. Want to hide an element from all devices in one go? That’s also now available with a single click from the right-click options menu in the editor.

To make a hidden element show on a certain device, go to the layers panel on that device view and click the visibility (eye) icon to set it to show there.

Cross-site spacing settings in Site Theme

You can now set a default section spacing in your Site Theme in Editor 2.0. The new setting means any new blank section you add to the site will automatically inherit the spacing you defined, whether it's in pixels, percentages, or other units you chose.

Full control per screen size

This new site-wide section spacing setting lets you set a default value for each of the different screen sizes, to give you full control over the appearance.

And this might also be a good opportunity to let you know that soon, we’ll add a Reset to Theme Spacing option to the design panel, so you can instantly apply any existing section to the Theme’s spacing setting with a single click...