Navigation Dark

  1. Home
  2. Horizontal Navigation
  3. Navigation Dark

$5,668

Sales

Description

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

Examples

Classic white

Custom dark colors

Dark amber

Teal without shadow

Dark red

CSS Classes

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

All these options can be set via following classes:

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

To set the dark horizontal navigation background color use .bg-[color] class where [color] is the value of your selected color from stack color pallette. 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-darken-[*]

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

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

To set the dark horizontal navigation border color use .border-[color] class where [color] is the value of your selected color from stack color pallette. So for teal color border class will be .bg-teal. Refer HTML markup line no 2. Border color class is a optional.
.border-darken-[color]

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

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

HTML Markup

This section contains HTML Markup to create dark horizontal navigation. This markup define where to add css classes to make horizontal navigation dark.

  • Line no 13: Contain the .navbar-dark class for adjusting horizontal navigation color dark. It has also .bg-teal & bg-darken-5 to set darken background color and border-teal & border-darken-4 to set darken 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-dark navbar-shadow border-grey border-darken-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

Layout Options
Navigation Color Options
Solid
Gradient

Solid

Gradient

Menu Color Options
Buy Now