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:

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:

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:

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:

From the first section of the sidebar, you are able to browse and change the template of the menu:

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.

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:

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:

You can also choose one of the already existing colors from the "My Colors" and "Theme Colors" sections.

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:

The "Horizontal" spacing will focus on the space located on both sides of the menu item text:

With the "Vertical" spacing you can set the vertical distance between menu items:

And lastly, you can use the "Between" option to adjust the space between each menu item:

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.

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:

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.

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.

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:

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.

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.

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:

Lastly, going back to the menu types, we will have one more to go through:

As soon as you select the "Hamburger" menu type, you'll notice that it comes with a new set of options:

Click on the "Edit menu design" button to access the editor:

This are the options that can be used in this case:

Use this slider to adjust the maximum width of the menu:

The height can be adjusted from the next slider:

Lastly, these three buttons allow you to change the vertical positioning:

You can also edit the individual menu items, simply by clicking on it and then using the left sidebar options:

You can read more about how to do that here.

Once you are ready with your customization, click on "Done" to return to the main set of options:

The remaining set of options from here are identical to the ones explained for the vertical and horizontal menu types:

At the bottom of the list, you'll notice two additional options:

Back to the main set of options, here's how you can 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.

Moreover. you are able to choose when each menu item should be shown: in the logged-in state, in the logged-out state, or always. Please check out this article if you want to see how to create a conditional menu.

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:

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 your menu items.

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 display text, icons, or images as your menu items. Open the drop-down to see the full list of available options:

Naturally, if you select "Text only", then your menu will only display text as your menu items:

This option will allow you to display icons as your menu items:

After you select this, you will be able to access the "Icon library" by clicking on the "Icon" field:

Browse the "Icon library" and select the desired one:

Once you select the one you want, you will also be able to adjust its size and color using the extra options that appear in the sidebar:

From here you will be able to display both icons and text as your menu items:

Once you make this selection, a set of new additional options will become available:

Just as described above in the case of the "Icon only" field, here as well you will be able to access the "Icon library" and select the icon that you would like, adjust its size and change its color.

In addition to this, you can also decide the positioning of the icons and text from these four buttons:

Use them if you want to position your icon to the left, right, top, or bottom of the text.

This option will allow you to use images in your menu:

Simply click on the blank image from each menu item, in order to access its options:

Right from the beginning, you can decide what type of image you would like to have here. You can choose between a "Static" one or a "Dynamic" one:

More details about these types of images can be found in this dedicated section of our knowledge base, so make sure to check that out if you want to learn more about this topic.

If you opt for a "Static" image, then open the field right under to access the media library and select an image from there:

Lastly, after you select the image, you will be able to further adjust its size and height from these two sliders:

If, on the other hand, you opt for a "Dynamic" type of image, then you can use the following options:

Open the "Dynamic source" drop-down list:

Here, pick one of the available sources. If you are unsure which one to use, make sure to read this section of the "How to Use the Image Element" article, where each of these sources is explained in detail.

For this example, I will select the "Author image":

As soon as I do that, the image set in my WordPress profile as my author image will be displayed as my menu item, and I can go ahead and use the remaining options to further customize it:

Lastly, feel free to use the "Image Effects" section for more customization:

We have a separate article in our knowledge base that takes you step by step through the process of displaying your "User Image" as a menu item, which you can find linked here.

Lastly, you can choose to display both text and images in your menu items from this last available option:

Here as well you can individually click on the images and use the available sources for them:

And, in addition to this, you will also have positioning buttons that you can use, just as in the case of the icons:

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.

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.

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":

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.

Furthermore, besides the options available in the left sidebar of your “Custom menu” element, it’s worth mentioning here that you can also use the inline formatting panel to customize your text:

From here, you can use the dynamic link option to turn your menu item into a dynamic text:

You can, for example, turn any “Menu Item”, into a dynamic text by choosing one of the available sources:

For example, choose "User data", and then, from the following drop-down, select "Wordpress username":

Lastly, click on "Insert":

And this automatically pulled the information from WordPress and displayed the name of the user that's currently logged in and editing the menu:

This might come in handy if you are creating a menu that has a "my profile" type of item, customized with the name and picture of each user that is viewing it.

Here are some resources you can find in our knowledge base if you want to learn more about this topic:

You can also edit/style the menu items in different states. Besides, the "Normal" state, which 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:

Naturally, the more general options are also available for the “Custom Menu” element, so these can also be used to customize the menu further:

This feature allows you to take a block of content from any page, and create alternate versions for it:

You can then assign different display rules to each version, and decide what each visitor to that page will see, depending on what kind of permissions that person has:

We have a separate article in our knowledge base that explains in depth how to use this feature:

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.

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 :)