1. Home
  2. Navbars
  3. Navbar Light

Navbar Light

CardsButtons

Description

Light color navbar with custom light color options. If you want to create a light color navbar use the following customization options.

Examples

Classic white

Custom light colors

Light amber

Light blue without shadow

Light red

CSS Classes

This table contains all classes which can be used in light navbar. You can combine them as per navbar light template requirements.

All these options can be set via following classes:

Classes Description
.navbar-light To set navbar light color you need to add .navbar-light class in navbar <nav> tag. Refer HTML markup line no 2.
.bg-[color]

To set the light navbar background color use .bg-[color] class where [color] is the value of your selected color from robust color palette. So for blue color background class will be .bg-blue. Refer HTML markup line no 2. Background color class is a optional if you don't it will take white background default.
.bg-lighten-[*]

To set the selected background color lighten use .bg-lighten-[*] class where [*] is the value between '1-5' of your selected lighten color from robust color palette. So for color lighten 4 background class will be .bg-lighten-4. Refer HTML markup line no 2. Background lighten color class is a optional if you don't it will take white background default.

.bg-lighten-[*] class will work only if you have used .bg-[color].
.border-[color]

To set the light navbar border color use .border-[color] class where [color] is the value of your selected color from robust color palette. So for blue color border class will be .bg-blue. Refer HTML markup line no 2. Border color class is a optional.
.border-lighten-[color]

To set the selected border color lighten use .border-lighten-[*] class where [*] is the value between '1-5' of your selected lighten color from robust color palette. So for color lighten 4 border class will be .border-lighten-4. Refer HTML markup line no 2. Border lighten color class is a optional.

.border-lighten-[*] class will work only if you have used .border-[color].

HTML Markup

This section contains HTML Markup to create light navbar. This markup define where to add css classes to make navbar light.

  • Line no 1: Contain the .navbar-light class for adjusting navbar color light. It has also .bg-blue & bg-lighten-5 to set lighten background color and border-blue & border-lighten-4 to set lighten border.
          
                <!-- fixed-top-->
                <nav  class="header-navbar navbar-expand-sm navbar navbar-with-menu navbar-light bg-blue bg-lighten-5 border-blue border-lighten-4">
                    <div class="navbar-wrapper">
                        <div class="navbar-header">
                            <ul class="nav navbar-nav mr-auto">
                                <li class="nav-item mobile-menu d-md-none float-left">
                                    <button class="nav-link menu-toggle hamburger hamburger--arrow js-hamburger is-active"><span class="hamburger-box"></span><span class="hamburger-inner"></span></button>
                                </li>
                                <li class="nav-item">
                                    <a href="index.html" class="navbar-brand nav-link"><img src="../../../app-assets/images/logo/logo-dark.png"></a>
                                </li>
                                <li class="nav-item d-md-none float-right"><a data-toggle="collapse" data-target="#navbar-mobile" class="nav-link open-navbar-container collapsed" aria-expanded="false"><i class="ft-ellipsis-h pe-2x icon-rotate-right"></i></a></li>
                            </ul>
                        </div>
                        <div class="navbar-container content">
                            <div id="navbar-mobile" class="collapse navbar-collapse">
                                <ul class="nav navbar-nav mr-auto">
                                    <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>                                    
                                </ul>
                                <ul class="nav navbar-nav float-right">
                                    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </nav>
                <!--/ fixed-top-->