1. Home
  2. Navbars
  3. Navbar Styling

Navbar Styling

Custom navbar styling options

Advanced CardButtons Extended

The navbar styling options provides navbar customization such as border, shadow, position and color.

Description

Robust Admin provides flexible navbar component, which allows you to modify navbar colors, appearance of different types of content, components placement etc. This page contain all navbar styling options.

CSS Classes

All this functionality is available by setting proper classes to the navbar components and navbar itself. Below table contain all available classes that can be used with the navbar:

Classes Description
.navbar-fixed-top To set navbar fixed at top you need to add .navbar-fixed-top class in navbar <nav> tag. For more information please check navbar-fixed-top.html.
.navbar-fixed-bottom To set navbar fixed at bottom you need to add .navbar-fixed-bottom class in navbar <nav> tag.
.navbar-static-top Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.
.navbar-brand-center This class allow you to set navbar branding portion at center. Add .navbar-brand-center class in navbar <nav> tag. For more information please check navbar-brand-center.html. This is optional class.
.navbar-light To set navbar light color you need to add .navbar-light class in navbar <nav> tag. For more information please check navbar-light.html
.navbar-dark To set navbar dark color you need to add .navbar-dark class in navbar <nav> tag. For more information please check navbar-dark.html
.navbar-semi-dark To set navbar semi dark color you need to add .navbar-semi-dark class in navbar <nav> tag. For more information please check navbar-semi-dark.html
.navbar-border You can add navbar border bottom by adding .navbar-border class in navbar <nav> tag. This navbar class is optional.
.navbar-shadow You can also apply navbar shadow bottom by adding .navbar-shadow class in navbar <nav> tag. This navbar class is optional.
.disabled To disabled navbar menu item link, you need to add .disabled class in navigation <li> tag. This navigation class is optional. Fore more information please check vertical-disabled-navigation-link.html

HTML Markup

This section contains HTML Markup to demonstrate navbar styling options. This markup define where to add css classes to customize navbar as per your requirements.

  • Line no 7 (Navbar position options): Contain the .navbar-fixed-top class for adjusting navbar fixed on top, here you can use any one class from .navbar-fixed-top, .navbar-fixed-bottom & .navbar-static-top as per your navbar position requirement.
  • Line no 7 (Navbar color options): Contain the .navbar-dark class for adjusting navbar color dark, here you can use any one class from .navbar-dark, .navbar-light & .navbar-semi-dark as per your navbar color requirement. You can also use custom colors i.e blue, red, cyan etc.. from Robust Admin color pallets, for more information of custom navbar color usage please refer navbar-light.html, navbar-dark.html & navbar-semi-dark.html
  • Line no 7: If you want to set navbar branding at center you can add .navbar-brand-center class to this line, its optional class.
  • Line no 7: Also contain the .navbar-border & .navbar-shadow classes that can be use together and both are the optional.
        
            <!DOCTYPE html>
              <html lang="en">
                <head></head>
                <body data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded">

                  <!-- navbar-fixed-top-->
                  <nav role="navigation" class="navbar header-navbar navbar-with-menu navbar-fixed-top navbar-dark navbar-shadow navbar-border">
                      ...
                  </nav>

                  <!-- BEGIN Navigation-->
                  <div class="main-menu menu-dark menu-shadow">
                      ...
                  </div>
                  <!-- END Navigation-->

                  <!-- BEGIN Content-->
                  <div class="content robust-content container-fluid">
                      <div class="content-wrapper">
                          <!-- content header-->
                          <div class="content-header row">
                              ...
                          </div>
                          <!-- content header-->

                          <!-- content right-->
                          <div class="content-right">
                              ...
                          </div>
                          <!-- content right-->

                      </div>
                  </div>
                  <!-- END Content-->

                  <!-- START FOOTER DARK-->
                  <footer class="footer footer-dark">
                      ...
                  </footer>
                  <!-- START FOOTER DARK-->

                </body>
              </html>

JADE Configuration

Robust Admin use JADE as template engine to generate pages and whole template quickly using node js, for getting start with JADE usage & template generating process please refer template documentation.

JADE Variables

This table contains required JADE variables to generate custom navbar.

Variable Value Description
headerCustom 'navbar-fixed-top' To set navbar fixed top, use headerCustom variable value as 'navbar-fixed-top' in headerConfig block.
headerCustom 'navbar-fixed-bottom' To set navbar fixed bottom, use headerCustom variable value as 'navbar-fixed-bottom' in headerConfig block.
headerCustom 'navbar-static-top' To set navbar static top, use headerCustom variable value as 'navbar-static-top' in headerConfig block.
headerCustom 'navbar-brand-center' Navbar brand class allow you to set navbar branding at center, use headerCustom variable value as 'navbar-brand-center' in headerConfig block.
headerCustom 'navbar-light' You need add navbar light class to headerCustom variable value as 'navbar-light' in headerConfig block, it contains navbar specific classes in that you need to add navbar-light. It also contain optional classes like bg-light-green bg-lighten-5 border-green border-lighten-4.
headerCustom 'navbar-dark' You need add navbar dark class to headerCustom variable value as 'navbar-dark' in headerConfig block, it contains navbar specific classes in that you need to add navbar-dark. It also contain optional classes like bg-dark-green bg-darken-5 border-green border-darken-4.
headerCustom 'navbar-semi-dark' You need add navbar semi dark class to headerCustom variable value as 'navbar-semi-dark' in headerConfig block, it contains navbar specific classes in that you need to add navbar-semi-dark. It also contain optional classes like bg-grey bg-lighten-5 border-grey border-darken-2.
headerCustom 'navbar-border' To add navbar border bottom set headerCustom variable value as 'navbar-border' in headerConfig block.
headerCustom 'navbar-shadow' To add navbar bottom shadow set headerCustom variable value as 'navbar-shadow' in headerConfig block.
JADE Code

To generate custom navbar page or template, you need to use following JADE code.

  • Line no 20-21: headerConfig block has a headerCustom variable, it contains navbar specific classes shown in above JADE Configuration table.
  • Line no 32-33: content block has content section html file included include ../contents/navbar-fixed-top.html, which can be customizable on page level.

From the above JADE Configuration table, you can choose navbar customization variable value as per your requirement and generate template or page with the help of JADE.

              
                  block pageVars
                    - var pageTitle    = "Navbar Styling"
                    - var pageSubTitle = "Custom navbar styling options"
                    - var description  = "The navbar styling options provides navbar customization such as border, shadow, position and color."
                    - var activeMenu   = "navbar-styling"

                  extends template

                  block headerConfig
                    - var headerCustom = "navbar-fixed-top navbar-dark navbar-shadow navbar-border" //- navbar-dark option used for dark navbar

                  append breadcrumbs
                    include ../includes/mixins
                    +breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Navbars"}, {name:"Navbar Styling"}])

                  append page-header
                    include page-headers/breadcrumb-top

                  //- Include page content in page block
                  append content
                    include ../contents/navbar-styling.html

                  //- Page specific dependency
                  //------------------------------

                  //- Add custom page specific CSS
                  block pagecss

                  //- Add custom page specific JS
                  block pagejs