### Navbar Light

#### Description

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

Experience it!

This page contain navbar light color options option example, check the top navbar.

#### 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 modern 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 modern 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 modern 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 modern 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="la la-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-->

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now