Configure ElementsKit Offcanvas Header

[mehadihasan123456]

Open the Elementskit Offcanvas Header widget setting and tap into the Content Tab. Next, go under the Header Offcanvas option, here the first thing it allows you to set is to add an overlay color.

Next, you can select the Type de menu pour Hamburger et Fermé options. You can showcase the hamburger menu with an icon or text.

choose an icon for the off-canvas WordPress menu button in Elementor
Menu type: Icon
set text for off-canvas WordPress menu button in Elementor
Menu type: Text
Or, you can enable both text and icons to navigate your linkedin data visitors. Then, you can adjust the gap between the icon and text as well.

choose the icon with the text for the off-canvas WordPress menu button
Mneu
You can also activate the Disable Scroll option so that the page does not scroll when the hamburger menu is triggered.

Step 3: Edit Offcanvas Panel
As you already know, clicking the hamburger menu icon will reveal the off-canvas panel. Within this panel, you will see the option “ Edit content .” Clicking it will load a widget area. You can add any widget and templates to create and customize the off-canvas panel.

How to Create Hamburger Menu on Elementor Websites
To showcase a menu, you can choose the ElementsKit Navigation Menu widget. After adding the navigation menu to the panel hit the "Mise à jour" button and click the “ X ” icon to exit this panel.

Step 4: Style Hamburger Menu on Elementor websites
Entrer le Onglet Style in the widget setting, you will see two options: Offcanvas & Offcanvas Panel for styling the hamburger menu.

The first part Hors toile lets you customize the Hamburger and Closed options. You can change the color of the icon and its background. Next, you can also customize the hamburger for hover effects with various styling parts, like color, background color, and border color.

Plus, there will be other styling features like changing icon size, customizing typography, selecting border type, defining alignment, etc.

Another part of the ElementsKit Offcanvas Header widget's Tab Style est le Offcanvas Panel. You can control the appearance of the offcanvas panel. You will see a Largeur slider to determine the length of the panel. Then, you can choose background types like solid color, gradient, & image background.

You can set the location of the offcanvas panel between left and right. Further, you can define the padding of the offcanvas panel.

Step 5: Publish Hamburger Menu
Don't just publish the hamburger menu after adding and customizing it, do check its preview and text the hamburger menu on your Elementor website.

Below, you can see a preview of our hamburger menu styling.