With the help of the Custom Menu element, you can easily personalize and display a menu on your website.
Here is a step-by-step guide that will show you how to do this:
Add the Element
The first step is to add the element to the page. In order to do that, click on the plus sign from the right sidebar and look for the “Custom Menu” element from the list that opens.
When you have found it, drag & drop it to the page:
After you have dropped the element on the page you will see a pop-up window open where you have to set up the menu you want to add.
In this pop-up window, firstly, you will have to select the type of menu you want to build. You can choose between a "Standard Dropdown Menu" and a "Simple Mega Menu".
The difference between them is that in the "Standard Dropdown Menu" the second and the third level items are displayed in the standard drop-down, one by one, not all at once.
Whereas, the "Simple Mega Menu" has one large drop-down where all the second and third level items are displayed at once. This is useful in complex navigation structures. If you want to find out how to build a "Simple Mega Menu", check out this article.
Here, we will select the "Standard Dropdown Menu" to showcase how to use the "Custom Menu" element.
Once you have selected the type of the menu, click on the "Continue" button to go on:
The next step consists of choosing the menu that you want to insert into the page. You can choose to create a default Custom Menu or use a WordPress Menu that you have previously set up in your WordPress dashboard:
Create a Custom Menu
If you want to create a new Custom Menu, instead of using one that you set up in WordPress, then, this is the option you should choose. Once you have selected it, you will see that a “Select Template” button appears. Click on it to continue:
This will open a pop-up window with every template available for the “Custom Menu” element. Scroll down to see all of them. When you have found the one you want to use, click on it to select it and then, click on the “Choose Template” button:
Use existing WordPress Menu
If you want to use one of your WordPress menus, choose the “Use a WordPress Menu” option, after you have selected the type of the menu:
This will display a new field where you can choose the menu from. Click on the little down arrow to open the drop-down with the list of your WordPress menus and select the one you want to use:
Then, the same “Select Template” button will appear as in the case of the “Create a Custom Menu” option, mentioned above:
Click on this button to choose the template for your WordPress menu. Then, same as before, select the template that best suits your needs from the list of templates and click on “Choose Template”:
Now the “Custom Menu” element has been added to the page and you can start using the left sidebar options to customize it to your liking:
Use the Template Options
From the first section of the sidebar, you are able to browse and change the template of the menu. To do that, click on the “Template” field, and simply change the current template with another one from the library:
You can choose between multiple templates, with a horizontal or vertical orientation, to find the one that best suits your website.
Note: If you want to replace the template, make sure you do this before adding any content or customize the existing content of the “Custom Menu” element. This is because, when changing the template, all the initial content and modifications will be lost.
Use the Main Options for Horizontal Menu Type
The following section from the left sidebar is the “Main Options” one. You can use the options available here to further customize the menu to your liking.
We will first go through all the available options for when a "Horizontal" type of template has been selected for the menu:
This option allows you to swap between a "Horizontal" or a "Vertical" orientation for the menu:
If you have chosen in the very beginning a horizontal template, then the type “Horizontal” will be selected here by default. If, on the other hand, you have chosen a vertical template, then the “Vertical” option will be selected.
Note: the “Vertical” menu type has several additional options in the sidebar, which are explained later in this article.
With the help of this option you can enable the hamburger toggle per screen size, just as showcased below:
This option comes in handy if you want to display the menu on smaller screens, such as tablets and mobile phones.
When you activate this toggle, several additional options appear in the left sidebar, as follows:
- Menu Icon: open the drop-down to view the full list of available icons you can choose from:
- Icon color and Icon size: customize the color and size of the icon, by making use of the color picker and the slider options:
- Menu State: choose between a "Closed" or "Open" state for how you want to display your menu when it loads on your page:
- Menu Display: open the drop-down list and select one of the available options:
As an example, this is how it would display for the "Off screen, right" option:
Here you have the possibility to change the menu that you have inserted when you added the custom menu to the page. If you click on the down arrow from this section, a drop-down will open with all your WordPress menus and the “Custom” menu as well:
Please keep in mind that if you choose the “Custom” menu, then, the menu items will be default ones. This will be a Thrive custom menu, so it is separate from your WordPress menus.
Thus, every change that you make on it will only affect the menu that you have created here. The changes will not be applied to your WordPress menu(s).
Whereas, if you choose one of your WordPress menus, the menu items will be the same as setting up in the WordPress admin dashboard. Therefore, if you modify the menu items here, they will also be modified in your WordPress dashboard.
If you want to change the color of the menu, you can do so by clicking on the color field:
This will open a pop-up with the color picker. You can either choose the color manually or insert a HEX/RGB code into the corresponding field:
Once done, click on “Apply” and return to the “Main Options”:
You can modify the horizontal spacing, the vertical spacing, and the spacing between the menu items.
Click on the type of spacing that you want to adjust and then, drag the slider under these options, or enter a value manually in the box next to them:
Split menu with logo
Just as its name says, this option allows you to split your menu with your logo. If you activate this option, your logo will be placed in the middle/center of your menu.
In order to activate this option, all you have to do is to click on the switch next to it:
Once the option is activated, the switch will turn green and you will see the logo automatically be displayed in the middle of your menu:
If you have a Thrive Theme Builder Theme installed and activated on your website, then the logo displayed in the menu will be the same one you set in the Thrive Theme Builder dashboard, as described here.
In case you want to find out more about the "Split menu with logo" option, take a look at this step-by-step guide.
Sub menu options
This section of the sidebar allows you to change the style of how the sub-menu items will display when the top-level items are expanded
- Dropdown Icon
Here you can choose which icon should be used in your menu. Click on the down arrow from this section to open the drop-down with the icon variations that are available:
When you click on one of the icons from the drop-down list, you will see the menu icons change accordingly. Choose the icon that is the most suitable for the design of your page.
- Dropdown Animation
This option will let you select a drop-down animation for your sub-menus. Click on the down arrow from this section to open the list with the drop-down animations. Then try out the different animations by simply selecting them one by one to see how they look like:
After you select a drop-down animation, hover your mouse over the menu item that has a sub-menu and you will see the drop-down animation that you have selected.
Disable links to current page
This option is useful if one of the menu items is linked to the current page (the one on which the "Custom Menu" element is also added to).
If you activate this option, the link to the current page will be disabled. This way, users will not be able to click on that menu item, since they are already on the respective page.
To activate this option, all you have to do is to click on the switch next to it:
Use the Main Options for Vertical Menu type
As mentioned at the beginning of this article, the “Main Options” might look slightly different if you have chosen a “Vertical” type for the menu:
Options such as the “Toggle”, “Menu Source”, “Colors” and “Spacing” can be used here as well, just as in the case of the “Horizontal” type.
We will only go through the options specific to the "Vertical" menu type.
Choose a "Left", "Center", or "Right" alignment for the content, using one of the available buttons:
To align the menu on the page, use the next four buttons and decide whether you want a "Left", "Center", or "Right" alignment or if you want a "Full" width display:
The "Full" width expands to the full width of the parent content box or container in which the menu is placed.
Note: for the "Content Alignment" option you decide the position of the content within the menu, whilst with the help of the "Menu alignment" buttons, you decide the position of the entire menu within your page.
The width of the menu is set by default to a maximum of "600 px", but it can be changed by using the slider, or by inserting a numerical value in the field next to it:
If, for example, the menu is moved or added to a more narrow sidebar, then the width will adjust to the size of that container.
Sub menu options
The sub menu options have been explained earlier in the article, but there is one additional option available for when the "Vertical" type of menu is selected.
- Expand Style
Just as its name says, you can change from here the style of the menu when it's expanded:
Thus, the submenu items can either appear under the top-level one when expanded or to the left or right side of the top-level item:
After you are done with customizing the way your menu looks, you can also customize the items available in your menu.
You can manage them if you open the “Menu Items” section of the Main Options:
You will be able to view the full list of items that are currently available in your menu:
If you want to add new items, simply click on the "Add new" button, and the new item will be added at the bottom of the list:
In order to edit the items, click on the “Edit” icon next to them and then, complete the necessary information:
You can change the current label, meaning you can give a name to the menu item in the first section of the pop-up window. Simply delete the current label and replace it with the name you want to give to this item.
Then, you should paste the URL of the page that you want this item to be linked to, or start typing the name of the page and a list with your pages will appear that you can select it from.
You also have the possibility to set the link to open in a new tab or set it as no-follow.
You will have to click on "Apply" to finish the editing of the item.
Besides editing the item, there are some other options in the “Menu Items” section as well.
If you wish, you can also rearrange the items by clicking on their dotted left side and dragging them to the desired place:
Furthermore, if there is an item that you don't need anymore, you can just delete it using the “trash” icon next to it:
Note: It is important to keep in mind that the “Menu Items” section is only available for the custom menus that you have just created.
If you want to edit the items of an existing WordPress menu that you have inserted in this element, then please click on the “Click here to edit this WordPress menu.” message, that appears under the “Menu Source” section:
Style Menu Items
Last but not least, you have the possibility to change the style of the top-level items (the main menus), as well as the drop-down items (the sub-menus).
In order to do this, first, click on one of the menu items. This will open the options of the “Menu Item” in the left sidebar:
In the “Currently styling” section, you can choose which items to customize. Click on the little down arrow and from the drop-down list that appears, select the group of menu items that you want to style:
Then use the “Main Options” of the “Menu Item” to proceed with the styling.
Note: if the "lock" icon next to your drop-down field is green, this means that the "Group styling" feature is enabled and any change you make will be applied to all items of the same level:
However, if you want to bring changes to only one item (and not to all items of the same level), then click on the "lock" icon and disable the "Group styling" feature:
Now any change you make will only be applied to the selected item.
This option refers to the effect your menu item will get when a visitor hovers his/her mouse over it. If you open the drop-down from this section, you will see a list with the available hover effects:
You can try these by selecting them one by one and then, hovering over the respective menu items in the editor to see how the effect looks like. When you have found the hover effect you want to use, just leave it selected and it will be applied to your menu items.
Depending on which template you have selected for your menu, here you can choose from different styles for the items of your menu.
Click on the “Choose” section and the list with the available item styles will be displayed. Select the style that you want for your items and click on “Apply”:
Important! Keep in mind that the “Hover Effect” and the “Item Style” options are only available when you are customizing the top-level items.
This option will let you easily add an icon to your menu items. Simply activate the option by clicking on the switch next to it:
Then, click on the next available field to select the icon you want to be displayed next to your menu item. This will open the icon library:
Once you select the one you want, you will also be able to adjust its size and color using the extra options that appeared in the sidebar:
With the help of this option, you can add a static link (first option, chain icon), a jump link (second option, anchor icon), or a dynamic link (third option) to the menu items that are selected.
Click on the icon representing the type of link that you want to add to the menu items and complete the necessary steps that will appear, in order to add the link.
- Static link: This is the link type that is selected by default here. You can simply enter the URL you want the menu items to link to, or in case you want to link to one of your pages, start typing its name and select it from the results that will appear.
You also have the option to make the static link open in a new tab or be no-follow, so customize this option to your liking.
- Jump link: If you want to add a jump link to the menu items (meaning a link that leads to an element on the same page on which this "Custom Menu" is) select the second option (anchor icon) from the "Link" section here:
Then, select the target, by clicking on the "Select Target" button and add the Jump link, while you are in the select mode. Adding jump links to menu items works the same way as adding such links to "Content Boxes", "Images" or other elements.
More details on how to do this can be found here.
Furthermore, you can activate the "Smooth Animation" toggle, thus enabling a smooth transition for the "jump link":
- Dynamic link: You can also easily add a dynamic link to menu items, by selecting the third option from here:
In order to add the dynamic link, you will have to select the exact content you want the menu items to link to, using the two fields that appeared under the "Link" option. After you have done that, you will be able to insert the link by clicking on the "Insert" button.
If you need more details on how to add dynamic links to menu items, click here.
You can also edit/style the menu items in different states. Besides, the "Normal" state, that is the general one available, which you have edited so far; you can also edit the menu items in the "Hover" and "Active" states.
In order to edit/style the menu item in a different state, first click on it to select it, then, click on the "State" section, from the left sidebar:
This will open the "State" drop-down, where you can select the state in which you want to edit the menu item:
Simply click on the state you want and you will see the options change in the left sidebar. You will be able to use the options that are available for the respective state to edit/style the menu item.
The "Hover" state refers to how your menu item will look like when the visitors of your website will hover their mouse over it. After you have selected the "Hover" state, you will see the options you can use to edit the menu item in this state:
In the "Hover" state, you can choose/change the "Style" and "Color" of the menu item. However, please keep in mind that in order to do this, you first have to choose a style for the menu item in the "Normal" state, just as described above.
You can also use the more general options ("Typography", "Background Style", "Borders & Corners", "Shadow") to further edit/style the menu item in this state.
The "Active" state refers to how your menu item will look like when the visitors of your website will be on the page that the menu item links to. Thus, this is the state that will be displayed when the page that the menu item links to is opened.
With the help of this state, you can apply a highlight effect, for example, to a menu item to show your users that they are currently viewing that piece of content.
If you select the "Active" state, you will also see the options in the left sidebar, that you can use to edit/style your menu item in this state:
Just as in the case of the "Hover" state, you can change or add a "Style" and "Color" to your menu item. Please keep in mind that in order to do this, you will first have to choose a style for the menu item in the "Normal" state, just as described above.
Furthermore, you can use the general options: the "Typography", "Background Style", "Borders & Corners", and the "Shadow" options to further edit/style the menu item in this state.
Besides customizing your menu as described above in the "Desktop" view, it is also useful to edit it in the mobile view, to create a menu that is mobile-friendly.
In order to edit your menu in mobile view, you have to click either on the “Tablet” or on the “Mobile” option from the center-bottom part of the editor:
These will show you how the page looks like on the respective devices, allowing you to further bring changes to your element so that it will look okay on all types of screen sizes.
Note: if you want to have, for example, a "Horizontal" type of menu on your "Desktop" view, and a "Vertical" one for your "Tablet" view, then activate the "Toggle hamburger" option:
Then, proceed with customizing the menu as described earlier in the article, in the "Toggle hamburger" section.
You can also use the "Responsive" feature of the left sidebar, and apply similar settings to your menu from there:
Click on the available tooltip icon if you want to learn more about the "Responsive" behaviors:
Use the Rest of the Options
Naturally, the more general options are also available for the “Custom Menu” element, so these can also be used to customize the menu further.
Hopefully, this article about how to use and customize the "Custom Menu" element was useful for you.
If so, don't hesitate to rate it with a smile below :)