How to Use Icon Nav Widget

How to Use Icon Nav Widget

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. Here, this documentation will allow you to know how to use the Icon Nav Widget.

In addition, I’ll give you some instructions and pictures detailed to help you get started.

To Insert 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.


Go to the Content tab > Iconnav.

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

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

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

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.

Offcanvas Menu

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.


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

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.


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.


Go to the Style tab > Icon > Normal.


Go to the Style tab > Icon > Hover.


Go to the Style tab > Icon > Active.


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.


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


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.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.