The navigation widget gives you the flexibility to easily navigate through your member’s profile page and it normally contains these items: Activity, Profile, Notifications, Messages, Friends, Groups, and Settings.
You have lots of options and complete freedom to create a unique navigation for your member profile
Navigation Content
In this section you can adjust the styling options of the content in the navigation menu.
Background Color
Under this option you have the option to choose your preferred background color for the entire navigation content.
Box Shadow
This styling option adds the shadow effect to the navigation widget. You can adjust the blur size and spread it horizontally or vertically and define the position between outline and inset.
Border Styling and Content Padding
With this option you can add some border styling to the navigation element. You can insert some border styling like adding different border types like solid, dotted, dashed, double among others. Then define the width size of your border within the navigation. Then select a preferred color for the border and add a radius size in case you want the navigation to have rounded corners.
You can additionally include some content paddings between the navigation content to increase spacing.
Navigation Item
This section will allow you to add styling options to specific navigation items like “Activity”, “Profile” e.t.c.
Alignment
This option enables users to position the navigation items either on the left, center or right of the container.
Display
This option enables users to show the navigation items in an inline (horizontal) view or a block (vertical) view.
Spacing
This styling feature is used to add more space between all the navigation items. You can define the spacing from the scale which is out of 50px maximum.
Typography
You can set the typography of the text in the navigation items. There are a lot of options in the typography box such as the font family, the font size in (px, em, %), and the font weight. Additionally when it comes to the text transformation, style, and decoration you can leave them as default. Change the letter spacing and line height according to your preference.
Text Color
You can select your preferred color for the text in the nav items. More so you can set the navigation item’s color on Normal, Hover and Active settings.
Background Color
Similarly you can pick a background color of your preference for the menu items. You can also set the navigation item’s color on Normal, Hover and Active mode settings.
Box Shadow
This styling option allows you to add the shadow effect to the navigation items under different states (normal and hover). You can adjust the blur size and spread it horizontally or vertically and define the position between outline and inset.
Border Styling
This option allows you to add some border styling to the navigation items. You can insert some border styling like adding different border types like solid, dotted, dashed, double among others. Then define the width size of your border within the items. Choose a preferred color for the border and add a radius size in case you want the nav items to have rounded corners.
You can additionally include some paddings between the menu items to increase spacing.
Counter
Spacing
This styling feature is used to add more space between the menu item and the actual counter. You can use a defined spacing from the scale which is out of 50px maximum.
Typography
In this style option you can alter the font settings of the text in the content area. Change the font family, size, weight, style, line height among others.
Text Color
You can select your preferred color for the text in the counter numbers.
Background Color
You can pick a background color of your preference for the counter. This can also be achieved in both the Normal, Hover and Active mode settings.
Border Type (Width, Color & Radius)
You have an option to add a border from different types like solid, dotted, dashed, double among others. You can also define the width size of your border in the counter section. Choose a preferred color for the border and add a radius size in case you want the borders to have rounded corners.
Padding
This can be used to increase or decrease the spacing within the counters or within the counter box with the padding and margin options respectively.
