How to change Header, Mobile Menu and Offcanvas Menu

Since version 4.20 of Sonaar, you can change the headers and menu directly within the Elementor editor. 

Choosing which template to use as your header.

  1. Go to WP-Admin > Theme Options > Menu Options.
  2. In the Menu Type, select Elementor Header
  3. Choose the template you want to use as your site header. The page template can be set up in WP-Admin > Headers & Footers.

Editing your header

  1. Go to your website front-end where you see your header.
  2. In the top toolbar, select Edit with Elementor > and select your header.

* Pro note: If you don't see the template to edit in this sub-menu, make sure to refresh the page.

* Pro note #2: As you can see, this sub-menu unveils all Elementor templates that are being used on the current page. It's useful if you want to jump into Elementor editing straight off from your site's front-end.

* Pro note #3: You can also access the header and footer templates in WP-Admin > Headers & Footers. The Off-canvas template is located in WP-Admin > Templates.

Changing your logo.

  1. Go to WP-Admin > Appearance > Customize > Site Identity

Editing Mobile Menu

  1. In the top toolbar, select Edit with Elementor > and select your header, as shown in the image above.
  2. Once you are in the editor and depending on the theme you are using, you might see 2 versions of your header. The first one is your desktop, and the second section below is your responsive version.

  3. To jump between Mobile, Tablet, or Desktop views, click the Mobile label in the yellow rectangle, or click the responsive icons and select Mobile:

  4. To set your responsive versions and decide which section to show or hide depending on the screen size, select the section and go to Advanced > Responsive. As you can see on the screenshot below, the selected section is 'Hide on desktop' which means it's gonna be shown on tablet and mobile and thus become our tablet and mobile version! The section above the selected one (aka the desktop version) with the yellow rectangle is set to be hidden on Tablet and Mobile and thus, become our desktop version.

  5. In this mobile menu, we are using an Off-Canvas menu which is represented by a hamburger menu. Using the off-canvas menu gives us all the flexibility we want to create any kind of mobile menu using Elementor. It's very powerful. To edit the template used when we click the hamburger menu, select the off-canvas widget and you will see which template is used, and a link to edit it.

    All Offcanvas templates are located in WP-Admin > Templates. They are basically Elementor templates.

  6. The template below can be edited by going on the front-end of your site and click Edit With Elementor > Off-Canvas, OR go to WP-Admin > Templates.

  7. The appearance and styling of the off-canvas are set by editing the off-canvas widget > Style tab. The content of the off-canvas is set by editing its template.

Pro Note: Everytime you want to edit a header, footer or off-canvcas menu within Elementor, and you are lost, go on your site's front-end and click Edit With Elementor > and select the template you want to edit.

Edit your menu items and menu labels

1. Go to WP-Admin > Appearance > Menu