booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Side Navigation

Side Navigation

Preview Widget
Preview Widget
Getting Started
Items & Separator Styling

More Widgets

• List Info Box
• Price Listing
• Interactive Icon Box
• Simple Images Slider

# Getting started

The side navigation widget give you the tools to create stylish navigation panels.Apply multiple hover effects & custom styles for your navigation items with the possibility to use a row separator.

Lets go over the details of this amazing widget.


This is where you will manage your navigation items list list.You can add an item to the list by clicking on the add item button at the bottom of this section.

  • Item Name : Define a name for this navigation item.
  • Link : Specify a go to link on click.You can click on the link options button(The cog wheel on the right) to enable the 'open in new window' and the 'no follow' options.


The style tab is going to be used to style your navigation items as well as the row separator.

  • Styling

This section allows you to change to align the list items, control the row inner space, and style the row separator.

-Text Align : Align the navigation list inside the containing section..

-: Change the padding values to control the row inner space.

-Enable Row Border: Enable the row separator for your navigation items.

-Border Size: Control the border side.

-Border Style: Choose a border style from the options provided in the list.

-Border Color: Apply a color for your border.

  • Typography & Color

Change the navigation items style.

-I : Change the font family, font size, and all the other text properties.

-Item Color : Alternate the color for the navigation items.

  • Hover & Active Styling

Customize the navigation items design for the hover & active states.

-I : Change the font settings to create awesome text.

-Item Color : Alternate the color for the navigation items.Note that this is for the hover and active states.

-: Specify a color for the items background.Both solid and gradient colors are available with the possibility to control the gradient direction.

-Decoration : Select one of the many decoration types available in the list.This will give your items extra visual prowess.

-Decoration Position : Control the position for the decoration.The options available are left and right.

-Decoration Size : Control the decoration size,The options available are small, medium, and large.

-Decoration Color : Customize the decoration color to create the suited hover and active effects.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket


We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.




Email :

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020