Tutorial

Customizing with SASS

Change the navigation using SASS

You can customize all the visual aspects of the navigation bar as colors and dimensions simply by modifying the SASS rules. Below are some examples of how to modify some of these aspects. In "Files/scss/navigation.scss" you can see the following structure:

// 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';
@import 'navigation/_navigation.transparent';
@import 'navigation/_navigation.fullscreen';

// Skins 
// Uncomment one of the lines below to include a skin in the final CSS file (navigation.css)

//@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';

You can open each of these files, change the rules, and recompile to generate a new "navigation.css". By default, all skins files are disabled. This means that navigation is using the default skin. Remove the comment sign of one of the skins to recompile with the chosen skin.

You can disable files from elements that you will not use. This will make the final CSS file smaller and optimize page loading. For example, if you are not going to use a logo or button, you can comment on these items and they will not be in the final file.

// 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';

The file "variables.scss"

This file gathers all the variables used in the various SASS files. This means that if you modify one of these variables, after recompiling the files, this value will be modified in the CSS file. This file gathers more than 130 variables and you can change all navigation only through it. See a small part of the file:

// GENERAL
// ================================================

// Screen size for media queries on landscape view
$landscape-width: 992px;


// COLOR PALETTE
// ================================================
$white:    		#ffffff !default;

$gray-01: 		#f8f9fa !default; // more light
$gray-02:		#e9ecef !default;
$gray-03:		#dee2e6 !default; 
$gray-04:		#868e96 !default;
$gray-05:		#495057 !default; // more dark

$main-color:   	#7367F0 !default; // purple


// MAIN COLORS
// ================================================
$background-color: $white;
$font-color: lighten($gray-05, 5%);
$font-color-hover: $main-color;
$border-color: $gray-02;
$submenu-background-color: lighten($gray-01, 1.5%);


// NAVIGATION
// ================================================
$navigation-height: 60px;
$navigation-background-color: $background-color;
$navigation-font-family: inherit;

You can change the value of the breakpoint, the color palette, dimensions, borders, font size, etc. Investigate this file (and the others) to see which variables and rules should be modified. To recompile the SASS files, you can use the application Scout-App. See the list of tutorials for other ways to modify the navigation bar and add features.