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 widget, it is just a matter of dragging and dropping. As you see in the screenshot above.
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.
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.
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).
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.
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.
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.
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.
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.