1. Home
  2. Docs
  3. Xpro Elementor Addons
  4. Free Elementor Widgets
  5. Horizontal Menu

Horizontal Menu

Xpro Horizontal Menu widget for Elementor

Xpro Elementor Addons offers a wide range of widgets that enhance the capability of your Elementor Page builder and allow you to create an appealing site. The Horizontal Menu widget for Elementor is another amazing widget by Xpro Addons that can be used by visitors to navigate through the site.

The Elementor Horizontal Menu makes it easy for your visitors what the website site is offering and how much content is available. It makes them easy to go to their desired location on the website. The customization offering Xpro Elementor allows you to design the layout of your choice.

How to Install Xpro Horizontal Widget for Elementor

Requirement

You need to install and activate the free version of Xpro Elementor Addons. If you already have the plugin installed, just ensure the Horizontal Menu Widget is ‘Enabled’, so you can find it in the Elementor editor.

To enable the widget, simply follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Widgets Tab and then toggle the button ON to enable the widget.

How to Use Xpro Horizontal Menu Widget for Elementor

The Horizontal Menu widget by Xpro Elementor is an advanced widget that makes your work easy by easily developing a horizontal bar menu. Create a menu and easily select it to make it appear on the screen. Customize the font, background, and submenu in the widget. Let’s further discuss how you can utilize this fantastic widget.

Step 1

Click on the Xpro Theme Builder section available in the Elementor Editor.

Step 2

Scroll down the Xpro Addons section, to find the Horizontal Menu Widget. Simply drag’n’drop the widget on the desired page location.

The default view of the widget shows the menu saved by you in the WordPress dashboard.

How to Change the Menu of the Xpro Horizontal Menu Widget

In the General Section of the Content Tab, you can view a bar for the Menu. Click on the drag-down menu to view all the menus saved by you in the WordPress dashboard. If you want to create or manage your menu, click on the anchor text “Menu Screen” below.

If you want to create a horizontal menu for single-page navigation then enable the option for One Page Navigation. By enabling this option, when the visitor clicks on the option mentioned in the menu he/she will be directed to the part of the content on the same page.

Set the alignment of the text in the horizontal menu to the left, right, center, or justified.

Make the widget responsive on tablet and mobile or mobile only. Click on the drag-down to select where you want the widget to be shown.

Select a toggle button icon for a responsive mode which helps users to open the menu when they click on it. Also, select an icon that will close the menu. Select the option from where the menu will appear.

How to Style the Xpro Horizontal Menu for Elementor

Put an amazing animation over the layout which appears when the user hovers over a menu option. There is a wide range of stunning layout animations which can enhance the user experience and engagement with your website.

From the Typography box, style the text written in the menu. The box offers numerous customization options such as font style, size adjustment, weight management, making space, and much more. Personalize the text format to meet your needs.

Color the text for its normal display. You can also put a color to the text for its hover state as well as color the background. When you click and open the menu, the menu is in an active state. Color the menu text and background which is in an active state.

You can make a border to the menu by selecting a border type. Manage the width of the border and give it a color. Adjust the content in the border with padding and margin option.

How to Style the Sub Menu in Xpro Horizontal Menu Widget

If your menu consists of sub-menus then you have the option to edit it as well. Style the typography of the text in the sub-menu and adjust the layout width.

Color the text and background for their normal, hover, and active states.

Color the line that separates one option from another. Adjust the size of the separator by increasing or decreasing its width. Give a shadow to the sub menu by the shadow box and manage its position and appearance.

How to Style the Toggle Button

Style the toggle button for the horizontal menu by adjusting its alignment to left, right, or center of the section. Give color to the icon and background and adjust their size.

Make a border around the toggle icon and adjust its width, radius, and margin. Give color to the border from the color option.

How to Style Xpro Horizontal Menu for Responsive Mode

Click and open the menu for the responsive menu. Click below on the responsive mode icon to view the layout in mobile or tablet mode.

Adjust the width of the menu on the screen with the width option. Color the background of the menu and also the overlay color which helps to blur the rest of the screen.

Customize the close icon that appears at the right top of the menu. A user can close the menu by clicking on this icon. Color the icon and background as well as adjust their sizes. Make a border around the icon and adjust its radius, width, and margin. Color the border from the color option.

Color the text and background of the menu and sub-menu from their specified sections. Color it for their normal, hover, and active state.

Best Horizontal Menu for Elementor

That is all from our Elementor Horizontal Menu Widget by Xpro. I hope now you have a better understanding of how to fully utilize our easy-to-use Horizontal Menu widget by Xpro and create a good-looking horizontal menu display. This widget allows you to showcase your important pages and allow users to easily access them. If you want to view more widgets like Horizontal Menu then check out Verticle Menu widget for Elementor.

If you want to explore and add more attractive Elementor widgets then check our complete list of free Elementor widgets and download our free Elementor addons now. Moreover, check our other promising widgets like the 360 product view widget for Elementor, Step Flow Elementor, Hotspot widget for Elementor, and Elementor Featured Image. You will be surprised how easily you can customize Xpro Elementor Addons for your WordPress websites.

How can we help?