SwissUpLabs Logo

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.

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
Next up
Edit this Page