CSS Helpers
Navigationpro gives unlimited posibilities in creating custom dropdowns. In order to make it easier to add styles to your custom content a plenty of css helpers comes together with the module. Here you can find most commonly used helpers.
Global Modifiers
These classes may be used in layout builder for custom HTML content.
| Class Name | Description |
|---|---|
| Common Utilities | |
panel |
Adds minor paddings and light-grey background |
links |
Use this on the ul element to give more space around li’s |
transparent |
Makes transparent background color |
text-small |
Use smaller font size |
text-big |
Use bigger font size |
row |
Element will place whole line and it will be centered |
| Display | |
flex |
Apply display:flex style. Useful to make horizontal lists |
flex-column |
Use to make vertical lists |
| Typography | |
bold |
Bold font weight |
regular |
Regular font weight |
italic |
Italic font style |
caps |
UPPERCASE text transform |
text-left |
Align text to the left |
text-center |
Align text to the center |
text-right |
Align text to the right |
text-justify |
Justify text alignment |
| Visibility | |
hide |
Hide element except for screen readers |
display-none |
Hide element completely |
xs-hide |
Hide element on mobile devices |
sm-hide |
Hide element on tablet devices |
md-hide |
Hide element on laptop devices |
lg-hide |
Hide element on desktop devices |
Additionally, navigationpro utilize following basscss modules:
You can also use xs- prefix modifers for these margin and padding modules.
Menu Modifiers
These classes may be used in Custom CSS field at Menu Settings page.
| Class Name | Description |
|---|---|
| Layout | |
navpro-amazon |
Use dropdown positioning for amazon menu |
navpro-iconic |
Allows to use icons/images in item name |
iconic-vertical |
Place item icon/image in separate row |
navpro-stacked |
Use stacked dropdown positioning |
navpro-ribbon |
Use ribbon menu styles |
| Layout Modifiers | |
navpro-nowrap |
Do not wrap top level items on the new line. Use separate dropdown for them. |
navpro-sticky |
Stick menu to the top of the screen. |
navpro-click |
Click-based dropdowns. |
| Effects | |
navpro-overlay |
Use overlay when dropdown is active |
| Top Level Caret Icons | |
caret-bottom |
Place parent item caret icon below the item name |
caret-hidden |
Hide parent item caret icon |
caret-light |
Use white caret icon |
caret-dark |
Use dark caret icon |
| Top level Items Alignment | |
justify-start |
Align items to the left edge |
justify-center |
Align items to the center |
justify-evenly |
Spread items across the menu width |
Item Modifiers
These classes may be used in Custom CSS field at Item Settings page.
| Class Name | Description |
|---|---|
| Effects | |
navpro-overlay |
Use overlay when dropdown is active |
| Dropdown State | |
home-expanded |
Initially expanded dropdown on the homepage. |
| Dropdown Visibility | |
xs-hide-dropdown |
Hide dropdown on mobile devices |
sm-hide-dropdown |
Hide dropdown on tablet devices |
md-hide-dropdown |
Hide dropdown on laptop devices |
lg-hide-dropdown |
Hide dropdown on desktop devices |
| Dropdown Positioning | |
navpro-stick-left |
Stick dropdown to the left |
navpro-stick-right |
Stick dropdown to the right |
navpro-stick-center |
Stick dropdown to the center |
| Text Styles | |
text-small |
Use smaller font size |
text-big |
Use bigger font size |
| Caret Icons | |
caret-light |
Use white parent item caret icon |
caret-dark |
Use dark parent item caret icon |
| Top Level Caret Icons | |
caret-bottom |
Place caret below the item name |
caret-hidden |
Hide caret icon |