In this documentation, we will show you how to customize the Icon Nav widget presented by Element Pack Pro.

Inserting The Icon Nav Button Widget

Inserting the widget by following this,

1. Search by the Icon Nav widget name.
2. Then select the appear widget ( with Element Pack Pro logo T.R corner).
3. After Drag and Drop it on the Elmentor Editor page.

Content Tab

The Content tab controller displayed here offers the flexibility to adjust the layout of the widget according to your preferences.

Icon Nav Section

Go to Content > Icon Nav

Let’s customize the icon nav by following it.

1. Click on Any item and it will expand the item and there you can edit it.

2. Icon: Set the icon for the nav item.
3. Iconnav Title: Set the title for it.
4. Link: Set a link for it. Set the section id for navigation.

5. Click on the ” + Add Item ” button to add more items to the icon nav. You can add as many items as you want.

Offcanvas Menu Section

Go to Style > Offcanvas Menu

Customize the off-canvas menu item,

1. Select Menu: Select a menu for the canvas.
2. Max Menu level: Set the level for the menu (e.g.: Level1, Level2, Level3).
3. Overlay: Enabling the swither to show the overlay.

4. Animation: Set the for the off-canvas (e.g.: Slide, Push, Revel, None).
5. Flip: Enable the switcher to Flip it.
6. Close Button: Enable the switcher to show the close button.

Branding Section

Go to Content > Branding

Customize the branding section by following,

1. Show Branding: Enable the switcher to show the branding.
2. Choose Branding Image: Set branding image by choosing from the media library.
3. Space: Set the space between the Brand image and Icon nav.

Additional Settings Section

Go to Content > Additional Settings

Set the settings for the additional feature,

1. Menu Text: Set the Menu text by selecting ( e.g.: Show as Tooltip, Show as Icon).
2. Iconnav Width: Set the width for the iconnav.
3. Iconnav Position: Set the position for the icon nav.

4. Top Offset: Set the position for the Top.
5. Icon Gap: Set the gap for the Icon.
6. Tooltip Spacing: Set spacing for the tooltip.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects that are visually appealing and cohesive with the overall design of the interface.

Icon Nav Section

Go to Style > Icon nav

Make this section most customizable by following it,

1. Background Color: Set the background color for the Iconnav.
2. Border Type: Set the border for the icon nav.
3. Border Radius: Make the border section radius.
4. Box Shadow: Make the shadow for the box.

Icon Section

Go to Style > Icon

Customize the Normal State

Make this section interactive by following the style,

1. Size: Set the size for the icon.
2. Color: Set the color for it.
3. Background Color: Set the background for Icon.

4. Border Type: Set the type for the border.
5. Border Width: Set the widget for the
6. Border Color: Set the border color.
7. Border Radius: Make the border-radius.

8. Box Shadow: Set the shadow for the box.
9. Padding: Make the padding for the icon.
10. Margin: Set the margin for the icon.

Customize the Hover State

Make customize for the hover section,

10. Color: Set the color for the Icon.
11. Background Color: Make the background for the icon.

Customize the Active State

12. Background Color: Set the background for the color.

Tooltip Section

Go to Style > Tooltip

Make the tooltip customizable by following it,

1. Background Color: Set the background tooltip settings more customizable.
2. Color: Set the color for the tooltip.
3. Border Type: Set the type for the border.
4. Border Radius: Set the border for radius.

5. Box Shadow: Make the shadow for the box.
6. Typography: Set the typography for the tooltip.
7. Arrow Color: Make the arrow for color.

8. Tooltip Animation: Set the animation for the tooltip(e.g.: Shift Forward, Fade, Scale, etc.).
9. Tooltip Size: Set the size for the Tooltip (e.g.: Default, Large, Small ).

Offcanvas Section

Go to Style > Offcanvas

Make the off-canvas section interactive by following the controls,

1. Text Color: Make the text color more customizable.
2. Link Color: Set the link color.
3. Link hover Color: Make the hover color, this changes appear on mouse hover.
4. Link Active Color: Make the link active color.

5. Background Color: Set the background color.
6. Box Shadow: Set the shadow for the box.
7. Padding: Make inner spacing by setting the padding.

Branding Section

Go to Style > Branding

Make the branding section stylish by following the controls,

1. Background Color: Set the background color for the branding.
2. Color: Set the color for the branding.
3. Border Type: Set the type for the border.
4. Border Radius: Set the border-radius.

5. Box Shadow: Make the shadow for the branding.
6. Typography: Set typography for the branding.

Video Assist

You can watch the video above to learn about the Search widget.
Please visit the demo page for examples.

Thanks for staying with us.