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 & insert the menu
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 the 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 to 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”:
Customize the menu - Main Options
You can customize the way your menu looks like by using the specific options of the element that appear in the left sidebar:
The first option that you can use is selecting the type of your menu. You can choose between a Horizontal menu and a Hamburger menu. All you have to do is to click on one of these to choose it:
As you click on one of these two types, you will see your menu change accordingly in the editor.
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 set up in the WordPress admin dashboard. Therefore, if you modify the menu items here, they will also be modified in your WordPress dashboard.
This option allows you to change the template of your menu anytime. Simply click on the field with the name of the template and the edit icon in it:
This way you will open the window with the available templates, the same window that you have used to choose the template in the first place:
Then, just as before, select a template and click on the “Replace template” button:
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.
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.
Here you can choose which icon should be used in your menu. Click on the down arrow from this section to open the the drop-down with the icon variations that are available:
When you click on one of the icon variations 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.
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. Once you’ve tried every animation, leave the one that you like best selected:
Disable links to current page
This option is useful, if one of the menu items is the current page you have added the "Custom Menu" element to. If you activate this option, the link to the current page, from the "Custom Menu" element, will be disabled.
This way, users will not be able to click on that menu item, which is suitable, 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:
After you do this, the switch will turn green, meaning that the option is activated:
After you are done with customizing the way your menu looks like, you can also customize the items that the menu contains.
Edit/Manage Menu Items
You can manage the items of your menu if you open the “Menu Items” section of the Main Options:
You can add new items to the menu anytime by clicking on the blue "Add new" button.
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 right 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.
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” it:
Note: Please keep in mind that the “Hover Effect” and the “Item Style” options are only available when you are customizing the top level items (the main menus).
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 “Choose” section to select the icon you want displayed next to your menu item. This will open a window with the many available icons you can choose from.
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 the 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:
- 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.
- 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 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 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.
Whenever you edit the style of menu items, you will see that “Group Styling” is applied to them. Group styling means that the changes you apply to one of the items, will automatically be applied to all the other items of the same level as well.
If you want to edit the menu items one by one, you will have to deactivate group styling.
In order to do that, click on the specific item you want to edit separately. Then, click on the “Lock-Unlock” option that appears in its upper left corner, or on the one that is in the “Currently Styling” box:
This way, since you have deactivated “Group Styling”, you won't be styling the item simultaneously with the same level items anymore. Therefore, the changes that you bring to the item you have selected will only be applied to that specific item.
Naturally, the more general options are also available for the “Custom Menu” element, so these can also be used to customize the menu further. If you want to find out how to use these options, please check out the separate tutorials about each of these on our tutorials page, or in our knowledge base.
Here is an example to show you how you can change the color of your menu.
In order to change the current color of your menu, or to give it a color in case it does not have one yet, you will have to use the “Background Style” option from the right sidebar.
If you have selected a template that has a background color, then you will see a box with that color when you open the “Background Style” option. If you click on that box, the color picker will open and you can set a new background color for your menu:
If your menu does not have a background color yet, then you can add a layer with the desired color to its background. You can read more on how to do that here.
Besides customizing your menu as described above in desktop view, it is also useful to edit it in 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.
Once you select either of them, you can see in the right sidebar that the "Menu State" is “Closed”. So, to be able to properly customize the menu, select “Open”:
This will transform the hamburger icon into an 'x' and it will open the menu. Thus, you will edit the menu as it will be displayed when visitors open it.
The “Menu Source”, the “Template”, the “Spacing” and the “Dropdown Icon” options work exactly the same way as they did in desktop view, presented above.
The last option from the “Main Options“ is the “Menu Display”. Here you can select the way in which the menu will be displayed when viewed from a mobile device. Click on the “Menu Display” section to open the drop down with the available display modes:
If you click on the display modes, you will see how they look like in the editor. When you find the one you like, leave it selected and it will be applied to your menu.
After customizing the menu in the “Open” state, you can also manage the “Closed” state. Here you have some extra options that you can use:
By default, when a visitor will access your page from a mobile device, the menu will appear in the “Closed” state at first. This state consists of an icon. The visitor will have to use this icon to open the menu. You can select this menu icon by clicking on the “Menu Icon” section:
Then you can change the color and adjust the size of your icon by using the “Icon color” and the “Icon size” options:
You can change the color of the icon by clicking on the box with the color from the “Icon color” section. A color-picker will open, and once you select the desired color for your icon, you just have to click on the “Apply” button and it will be applied.
Adjusting the size of the icon is also easy. Simply drag the slider under the “Icon Size” option or enter a value manually in the box next to the slider. This will automatically transform your icon to the size you set here.
After you are done with customizing your menu like this as well, it will fit your website's design in both Desktop and Mobile view.
In case you want to find out more about the various Thrive Architect elements, please consult our knowledge base.
Hopefully, this article was useful for you. If so, please give us a smile below :)