This guide applies to the following Elementor Template Kit:
Menus settings
This integrated Elementor kit, unlike most themes, gives a solution with two menus in the header.
One menu is shorter, it should have up to 2-5 items, and it is constantly visible to site visitors – but is only displayed on desktop monitors:
The second menu is activated by clicking on the hamburger icon. This menu is full-screen and it is displayed on screens of all sizes. In the demo version, it looks like this:
Before you can make menus active on the website, you need to create them. Both menus are created, each separately, in the way and location common in WordPress: WP Dashboard > Appearance > Menus. Enter the name of the new menu (eg Main menu, and for a shorter menu – Short menu) in the field provided, and click the Create Menu button. When the new menu is created, you can enter and arrange links in it at will, in the standard WordPress way.
Before you can make menus active on the website, you need to create them. Both menus are created, each separately, in the way and location common in WordPress: WP Dashboard > Appearance > Menus.Enter the name of the new menu (eg Main menu, and for a shorter menu – Short menu) in the field provided, and click the Create Menu button. When the new menu is created, you can enter and arrange links in it at will, in the standard WordPress way.
Note: this site looks better when all items in both menus are made to be of the same priority, ie without using submenus.
After creating both menus, you need to link them to the Elementor templates.
We will first link a permanently visible, shorter menu. You will put it directly in the header template. Enter the editor as follows: WP Dashboard > Templates (1) > Theme Builder (2) > Header (tab, 3) > CC Main Header (hover your mouse over it, 4) > Edit with Elementor (5)
In the Elementor editor, locate the Nav menu widget (1), in the Content > Menu field (2) assign it the menu you intended for that position (in our example, Short menu) and save the change by clicking the Update button
Now it remains to determine the menu that will be displayed in full screen, by clicking on the hamburger icon.
In the Choco Concept Elementor kit, this menu is displayed using the popup technique. Therefore, select WP Dashboard > Templates (1) > Popups (2), hover your mouse over the CC Full Page Main Menu Popup (3), and click on the Edit with Elementor (4) link.
In the Elementor editor, locate the Nav menu widget (1), in the Content > Menu field (2) assign it the menu you intended for that position (in our example, Main menu) and save the change by clicking the Update button
Lastly, don't change anything on the next screen – just click on the Save & Close link.
This way, you have created and customized the menus of your future site.