1. Home
  2. Horizontal Navigation
  3. Navigation Light

Navigation Light

CardsButtons

Description

Light color horizontal navigation with custom light color options. In this page you can experience it. If you want to create a light color horizontal navigation use the following customization options.

Examples

Classic white

Custom light colors

Light amber

Teal without shadow

Light red

CSS Classes

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

All these options can be set via following classes:

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

To set the light horizontal navigation background color use .bg-[color] class where [color] is the value of your selected color from modern color palette. So for teal color background class will be .bg-teal. 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 horizontal navigation border color use .border-[color] class where [color] is the value of your selected color from modern color palette. So for teal color border class will be .bg-teal. 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 horizontal navigation. This markup define where to add css classes to make horizontal navigation light.

  • Line no 13: Contain the .navbar-light class for adjusting horizontal navigation color light. It has also .bg-teal & bg-lighten-5 to set lighten background color and border-teal & border-lighten-4 to set lighten border.
        
              <!DOCTYPE html>
              <html lang="en">
                <head></head>
                <body data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded">

                  <!-- START Navbar-->
                  <nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu fixed-bottom navbar-dark navbar-shadow navbar-border">
                      ...
                  </nav>
                  <!-- END Navbar-->

                  <!-- START  Horizontal navigation -->
                  <div role="navigation" data-menu="menu-wrapper" class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-light navbar-shadow border-grey border-lighten-2">
                      ...
                  </div>
                  <!-- END Horizontal navigation-->

                  <!-- BEGIN Content-->
                  <div class="content app-content">
                      <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>

Theme Customizer

Customize & Preview in Real Time

Menu Color Options
Layout Options
Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now