Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

Table Of Contents

Icon Nav Widget

How to Use Icon Nav Widget

Here, this documentation will allow you to know how to use the Icon Nav Widget. As you know, the navigation bar is one of the key features of a website. However, there are various types of navigation bars and Iconnav is one of them.

Let’s see how our icon navigation menu by Element Pack works.

To Insert Widget

inserting Icon Nav Widget

Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot in designing the Elementor icon nav widget.


icon nav widget items

Go to the Content tab > Iconnav.

After dragging and dropping the widget in a new section, you will get a list group. The list is not limited, you can add a new list in the group by just clicking on the +ADD ITEM button.

img 61136b0cd3d43 - BdThemes

In terms of getting the content with the same design, you can duplicate the item by clicking on the duplicate icon and to delete clicking on the delete icon.

Importantly, you’ll find a bar that includes navigation with icons (such as Homepage, Product, Support, Blog, About Us).

product images

You can edit every single list item(repeater). Simply, hit on the List Item and edit the field found in the List Item. Then, set Icon, Iconnav Title, and especially Link in the list item for the Icon Nav Widget.

Offcanvas Menu

iconnav 4 - BdThemes

Simply, go to the Content tab > Offcanvas Menu.

In this section, you’ll be able to set what menu you want to display and its level (like Level 1, Level 2, and Level 3)

When you select the Menu (remember, you’ve to create a menu), you’ll find a few more options such as Animations (Slide, Push, Reveal, None) and switcher button (Overlay, Flip, Close Button).

If you enable the Flip switcher button, you will discover the offcanvas on the right side.

And, the Animations control will allow you to set animations such as Slide, Push, etc.


iconnav 5 - BdThemes

Only, go to the Content tab > Branding.

Here, this section will let you set the brand image and space. But, if you want to hide or reveal the brand image, you can work with Show Branding switcher button.

Additional Settings

iconnav 6 - BdThemes

Go to the Content tab > Additional Settings.

Additional Settings section includes a few controls. Especially, from the Menu Text, you can display menu choosing Show as Tooltip or Show Under Icon. Look at the screenshot and check the rest of the controls.

Style Tab

Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


iconnav style 1 - BdThemes

If you want to style the Icon Nav. Simply, go to the Style tab > Iconnav > check all controls (such as Background Color, Border Type, and Border Radius, etc.)


Under this section, you will find three mode Normal, Hover, and Active. All the modes allow you to style the Icon. Keeps you eyeballs on the pictures.


iconnav style 2 - BdThemes

Go to the Style tab > Icon > Normal.


iconnav style 3 - BdThemes

Go to the Style tab > Icon > Hover.


iconnav style 4 - BdThemes

Go to the Style tab > Icon > Active.


iconnav style 7 - BdThemes

Go to the Style tab > Tooltip.

In this section, you’ll be able to define the background and text color along with border type and radius, box-shadow, and Typography.
The most important thing is that you can set animation(Fade, scale, etc.) and size(large/ small) to the Tooltip.


iconnav style 5 - BdThemes

For having style to the Offcanvas section, go to Style tab > Offcanvas and work with the controls ( Text Color, Link Color, etc.).


iconnav style 6 - BdThemes

It is pretty simple. Just, go to the Style tab > Branding.

Video Assist

In brief, probably you’ve noticed that Icon Nav widget by Element Pack includes some eye-catchy functions. You’ll agree me about Branding and Offcanvas Menu. Watch the film and visit the demo page to get more ideas. That’s it.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.