1. Home
  2. Docs
  3. Header Elements
  4. Icon Nav

Icon Nav EA Element

Spice up your navigation menus with pretty icons, easily and within minutes by using EA Icon Nav widget for Elementor page builder. You can add an icon in the menu items to show them in a very nice way. Here in this tutorial, you’re going to learn how to use the Icon Nav element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Icon Nav Element

 

»Content

 

Icon Nav

Adding the Icon Nav Items

⇒Icon: Select a relevant icon for the menu so that viewers can easily recognize the purpose.

⇒Iconnav Title: Enter the icon nav title.

⇒Link: Add your section id WITH the # key. e.g: #my-id also you can add internal/external URL.

⇒Add Item: Use the ‘+Add Item’ button to add more icon nav menu to the list.

Offcanvas Menu

⇒Select Menu: Select the off-canvas menu from the menu list. The child menu is not visible in off-canvas for some design issues.

: Set the max menu level. You can set a max 3 level menu because of a design issue.

 

Branding

⇒Show Branding: Enable/disable the branding logo within the nav menu and then customize the following options:

: Choose your branding image from the media library or upload one from your system.

→Space: Generate some space between the branding logo and nav menu icons.

 

Additional Settings

⇒Menu Text: Set the menu text either show as a tooltip on the icon or show under the icon.

⇒Icon Nav Width: Customize the width of the icon navbar manually for different dimensions.

⇒Icon Nav Position: Set the icon nav position either left or right.

⇒Top Offset: Customize the top offset to get a better positioning manually for different dimensions.

⇒Icon Gap: Generate the gap between icon nav icons manually for different dimensions.

⇒Tooltip Spacing: Generate tooltip spacing manually for different dimensions.

 

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.

 


»Style

 

Iconnav

⇒Background Color: Add a custom background color to the icon navbar.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the icon navbar for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the icon nav border.

⇒Border Radius: Set the border-radius around the icon nav for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Icon

⇒Size: Set the icon size of the icon nav menu for normal, hover and active view. Set the size value for different dimensions.

⇒Background Color: Add a custom background color to the icon for both normal, hover and active views.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the icon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the icon border.

⇒Border Radius: Set the border-radius around the icon for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Padding: Set the padding value for the top, right, bottom and left around the icon for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the icon for different dimensions. You can link the values together or customize them individually.

 

Tooltip

⇒Background Color: Add a custom background color to the tooltip text.

⇒Color: Add a custom color to the tooltip text.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the tooltip text for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the tooltip for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Typography: Set the typography options for the tooltip text.

⇒Tooltip Animation: Add an animation effect on the tooltip by selecting an effect from the list. You can leave it as default as well.

⇒Tooltip Size: Select the tooltip size either large, small or leave it as default.

 

Branding

⇒Background Color: Add a custom background color to the branding logo/image.

⇒Color: Add a custom color to the branding logo/image.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the branding logo for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the branding logo for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Typography: Set the typography options for the branding logo.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Icon Nav Element.


Was this article helpful to you? Yes No

How can we help?