If you are new to WordPress and this guide is difficult for you then please watch the video guide:
WordPress automatically creates a menu of your pages for you, but the Custom Menu gives you complete control of what appears in the menu, where it appears and also the menu title. Many times the page title you want to use will take up a big part of the width of your header where the navigation menu appears. Custom menu allows you to shorten or totally change the name that appears in the navigation.
We use custom menus feature in all our themes. If you haven't imported the demo content, you have to create one.
1. Creating a menu
Go to Appearance > Menu > Edit Menu - tab
- First, click on the "create new menu" link in the top.
- Fill in the name and click on "create menu".
- Add menu items from the column on the left.
- From the menu settings below, choose the location of the newly created menu.
- Click on "save menu"
Adding Items to a Menu
- The Screen Options in the top right allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default. if you click on "Screen Options" it will slide down. so you can easily hide or show items.
- To add an item to your menu, select the item from the columns on the left and click on "Add to Menu" button. after a moment you will see the item appear in the bottom of your menu on the right.
- Please remember you should always save your changes by clicking on "Save Menu" which can be found in the header and the footer of the menu editor .
Deleting a Menu Item
- Locate the menu item that you want to remove in the menu editor window
- Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
- Click on the "Remove" link. The menu item/box will be immediately removed.
- Click the "Save Menu" button to save your changes.
Customizing Menu Items
- Locate the menu item that you want to customize in the menu editor window
- click on arrow icon in the top right-hand and expand.
- The Navigation Label: This field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog.
- The Title Attribute This field specifies the Alternative ('Alt') text for the menu item. This text will be displayed when a user's mouse hovers over a menu item.
- CSS Classes (optional) If you add "Home" in this field it will add Home Icon instead of text - the way it is on our demo website:
- Please note that the theme does not support the field "description".
Creating Multi-level Menus
The WordPress menu editor allows you to create multi-level menus using a simple 'drag and drop' interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.
To make one menu item a sub - menu of another, you need to position the 'child' underneath its 'parent' and then drag it slightly to the right.
- Move the child item just below the parent
- Position the mouse over the 'child' menu item.
- Whilst holding the left mouse button, drag it to the right.
- Release the mouse button.
- Repeat these steps for each sub-menu item.
- Click the Save Menu button in the Menu Editor to save your changes.
2. Styling the Menu
Menu styling options are available in Toolbar > "Edit with Elementor" > "Header"
You can select the menu, edit its layout, align, typography, colour, etc. Please also check this article: https://docs.elementor.com/article/244-nav-menu