NAVX

Tutorial and guides

Using navigation skins

There are a lot of skins ready to use

There are 10 different skins ready to be used. We'll take the "border-top" skin as an example and show you how to use it.

Add the CSS file to your project

The skin files are available in "Files/css/skins". Add the desired skin to your project:

Copy 
<link href="css/navigation.css" rel="stylesheet">
<link href="css/navigation-skin-border-top.css" rel="stylesheet">

The result:

The list of available skins:

Name File
border-top navigation-skin-border-top.css
border-bottom navigation-skin-border-bottom.css
border-top-bottom navigation-skin-border-top-bottom.css
boxed navigation-skin-boxed.css
ounded-boxed navigation-skin-rounded-boxed.css
colored navigation-skin-colored.css
gradient navigation-skin-gradient.css
mini-circle navigation-skin-mini-circle.css
bottom-arrow navigation-skin-bottom-arrow.css
dark navigation-skin-dark.css

All SASS files for the skins are in "Files/scss/navigation/skins". You can recompile the files including the skin. Just remove the comment sign from the skin line as you can see below: 

// Mixins
@import 'navigation/mixins';

// Variables
@import 'navigation/variables';

// Navigation
@import 'navigation/_navigation.core';
@import 'navigation/_navigation.brand.text';
@import 'navigation/_navigation.logo';
@import 'navigation/_navigation.toggler.button';
@import 'navigation/_navigation.body';
@import 'navigation/_navigation.menu';
@import 'navigation/_navigation.menu.social';
@import 'navigation/_navigation.submenu.indicator';
@import 'navigation/_navigation.button';
@import 'navigation/_navigation.text';
@import 'navigation/_navigation.badge';
@import 'navigation/_navigation.inline.form';
@import 'navigation/_navigation.dropdown';
@import 'navigation/_navigation.dropdown.horizontal';
@import 'navigation/_navigation.megamenu';
@import 'navigation/_navigation.megamenu.grid';
@import 'navigation/_navigation.megamenu.list';
@import 'navigation/_navigation.tabs';

// Skins
@import 'navigation/skins/_navigation.border.top';
//@import 'navigation/skins/_navigation.border.bottom';
//@import 'navigation/skins/_navigation.border.top.bottom';
//@import 'navigation/skins/_navigation.boxed';
//@import 'navigation/skins/_navigation.rounded.boxed';
//@import 'navigation/skins/_navigation.colored';
//@import 'navigation/skins/_navigation.gradient';
//@import 'navigation/skins/_navigation.mini.circle';
//@import 'navigation/skins/_navigation.bottom.arrow';
//@import 'navigation/skins/_navigation.dark';

// Utilities
@import 'navigation/_utilities';

See the list of tutorials for other ways to modify the navigation bar and add features.