Menu Element

Amazing Design Flexibility

Buy Avada
Discover More
Prebuilt Websites

Display Your Website Menu Anywhere

The Menu Element is not only super flexible, with a vast array of styling options, but it is also highly functional. It can be used anywhere within your website and is not limited to use inside the header only. What is more, is you can add as many instances of the Menu Element to your pages or posts.

Special Menu Items

The special menu items are specific to the Menu Element, and allow you to add certain features to your menu. You can decide where to place these options on the sites menu and control the appearance/icon placement. The choices are WooCommerce cart, WooCommerce my account, Search, and the Slider toggle.

Extensive Styling & Configuration Options

There is not much that you cannot do with this Avada Menu Element. The styling options are almost endless. You can configure the position, margins, alignment, font family, size, sub-menu behavior, how it looks on mobile devices, and so much more.

Alignment & Justification

Choose the alignment of your menu items to position them exactly where you want.

Typography

Choose exactly how your menu look by changing the size and font of it.

Spacing & Padding

Controls the spacing and the padding for your menu items.

Regular & Hover / Active

Controls the styling options for regular or hover / active  state of your items.

Submenu Options

Choose the features you want your submenu to display.

Submenu Styling

Style your submenu items exactly how you want it to look.

Mobile Options

Specify how your mobile menu behave with these options.

Mobile Menu Styling

Style your mobile menu exactly how you want it to look.

The Avada: Website Builder

CREATE THE LAYOUTS YOU WANT

The Avada Website Builder gives you the ability to design and build any layouts for your Avada website. Choose to customize the Footer, single posts, Portfolio posts, archives, search results, and more. With the power of Layouts, Layout Sections, Conditional Logic, Layout Section Elements, and Avada’s massive range of Design Elements, the sky is the limit. Custom design a global footer or only apply the custom Footer to a single page or post.

avada-theme-builder
EXPLORE THE AVADA WEBSITE BUILDER

Header Builder

Whatever your design requirements are, getting the job done could not be any easier. You can decide how many columns to use when designing and building the header, with a vast array of styling options to perfect the layout. What’s more, is you can now choose to create and display as many different headers as you want for different pages and posts throughout your website.

Footer Builder

Free from any constraints of Global Options, anything you can imagine and design, you can build and implement as your Footer, either globally or in a conditional layout on a Custom Post Type, a post category, or any number of other possibilites. With the Avada Footer Builder, we have introduced a tool of unparalled design power and flexibility, and you are now limited more by your imagination than anything else.

The #1 Selling WordPress Theme Of All Time

625,000+

Individuals & Businesses Trust Avada

BUY AVADA

Documentation & Videos

We have a wide range of support material to suit your learning style. Our documentation is extensive and growing. There are almost 500 documents, where you can search and read about almost any aspect of Avada. Prefer to watch? We have a growing library of HD video tutorials covering the basics and much, much more. Like to engage? Submit a support ticket, join our Community Forum, or engage with other users on the community run Facebook Avada Users Group.

Documentation

Start Searching

Video Tutorials

Start Watching

Need Support?

Start Engaging

Customize Elements Globally Or Individually

Elements can be controlled globally inside of the Avada Global Options, or individually per Element by changing the options for each once added to a page or post. Individual Element options will always override the global options. This flexibility gives you the ultimate freedom to style Elements and content that is unique and will stand out from the rest of the site.

General

  • Menu – Choose which menu to use
  • Element Visibility – Choose to show or hide the element on small, medium or large screens.

  • Direction – Choose between a Vertical or a Horizontal Menu.

  • Margin – Set the top and bottom margin.

  • Transition Time – Set the time for submenu expansion and hover transitions .

  • Space Between Main & Sub Menu – Set the spacing between the Main Menu and the Sub Menu.

  • Menu Arrows – Choose if you want to show dropdown arrows on the main and sub menus.

  • CSS Class – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.

Extras

  • Animation Type – Select the type of animation: None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom.
  • Direction of Animation – Can be one of these values: Top, RIght, Bottom, Left, Static.
  • Speed of Animation – Accepts a numerical value from .1, which is the slowest, to 1, which is the fastest.
  • Offset Animation – Controls when the animation should start.

Main Menu

  • Minimum Height – Set the minimum height for the Main Menu.
  • Align Items – Select how the menu items will be aligned.
  • Justification – Select how the menu items will be justified.
  • Main Menu Font Size – Set the font size.
  • Main Menu Font Family – Set the Font Family for the Main Menu.
  • Main Menu Text Transform – Set the text transformation: Lowercase, Uppercase.
  • Main Menu Item Padding – Set the item padding for the main menu.
  • Main Menu Item Spacing – Set the item spacing for the main menu.
  • Main Menu Item Border Radius – Set the border radius for the main menu items.
  • Main Menu Hover Transition – Select the animation type when hovering the main menu items.
  • Main Menu Icon Position – Controls the main menu icon position.
  • Main Menu Icon Size – Controls the size of the main menu icon.
  • Mega Menu Thumbnail Size – Controls the size of the mega menu thumbnails.
  • Main Menu Item Styling – Set the normal & hover states for Main Menu Item Background Color, Main Menu Item Text Color, Main Menu Item Border Size, Main Menu Item Border Color, Main Menu Item Icon Color.

Sub Menu

  • Dropdown Carets – Set whether carets should be shown for dropdowns.
  • Submenu Mode – Select either Dropdown or Flyout.
  • Expand Method – Set how the submenu expands, either Hover or Click.
  • Submenu Expand Direction – Choose from Left or Right.
  • Submenu Expand Transition – Set the Font Family for the Main Menu.
  • Submenu Maximum Width – Set the maximum width for the submenu.
  • Submenu Font Size – Set the submenu font size.
  • Submenu Font Family – Set the font family for the Submenu
  • Submenu Text Transform – Set the submenu text to lowercase or uppercase.
  • Submenu Item Padding – Controls the padding of Submenu items.
  • Submenu Border Radius – Sets the border radius of the Submenu.
  • Box Shadow – Controls the Box Shadow on the Submenu: Width, Height, Box Shadow Blur Radius, Box Shadow Spread Radius, Box Shadow Color, Box Shadow Style.
  • Submenu Separator Color – Set the color for the Submenu separator.
  • Submenu Item Styling – Set styling for the submenu for both normal and hover (Submenu Background Color, Submenu Text Color).

Mobile

  • Collapse to Breakpoint – Set the breakpoint where the menu collapses.
  • Mobile Menu Mode – Select Collapsed or Expanded
  • Mobile Menu Expanded Mode – Set the mobile menu expanded display from Within Column – Normal, Within Column – Static, Full Width – Static
  • Mobile Menu Trigger Padding – Set the padding for the mobile menu trigger.
  • Mobile Menu Trigger Background Color – Set the background color for the Mobile Menu Trigger.
  • Mobile Menu Trigger Text Color – Set the text color for the Mobile Menu Trigger.
  • Main Menu Trigger Text – Set the text to display on the Mobile Menu Trigger.
  • Mobile Menu Trigger Expand Icon – Set the icon that will expand the Mobile Menu.
  • Mobile Menu Trigger Collapse Icon – Set the icon that will collapse the Mobile Menu.
  • Mobile Menu Trigger Font Size – Set the font size for the Mobile Menu Trigger Text.
  • Mobile Menu Trigger Horizontal Align – Controls the horizontal alignment of the Mobile Menu trigger
  • Mobile Menu Trigger Button Full Width – Set the Mobile Menu Trigger Button to full width.
  • Mobile Menu Trigger Bottom Margin – Set the bottom margin for the Mobile Menu Trigger
  • Mobile Menu Item Minimum Height – Set the minimum height for Mobile Menu items.
  • Mobile Menu Text Align – Set the text alignment.
  • Mobile Menu Indent Submenus – Switch the Mobile Menu Indents on or off for Submenus.
  • Mobile Menu Font Size – Set the Font Size for the Mobile Menu.
  • Mobile Menu Font Family – Set the Font Family for the Mobile Menu.
  • Mobile Menu Separator Color – Set the Separator Color for the Mobile Menu.
  • Main Menu Item Styling – Set the normal & hover states for Mobile Menu Background Color, Mobile Menu Text Color.