No Dropdown Arrow

$5,668

Sales

Description

Default horizontal layout has a navigation dropdown arrow. To hide it use horizontal navigation without dropdown arrow option.

Examples

Horizontal navigation without dropdown arrow

CSS Classes

This table contains class which can be used in horizontal navigation to hide dropdown arrow.

Classes Description
.navbar-without-dd-arrow To set horizontal navigation without dropdown arrow, you need to add .navbar-without-dd-arrow class in horizontal navigation <div> tag. Refer HTML markup line no 13.

HTML Markup

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

  • Line no 13: Contain the .navbar-without-dd-arrow class to hide navigation dropdown arrow.
          
            <!DOCTYPE html>
            <html lang="en">
            <head></head>
            <body data-open="click" data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded">

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

            <!-- START  Horizontal navigation -->
            <div role="navigation" data-menu="menu-wrapper" class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-light navbar-without-dd-arrow">
            ...
            </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 body-->
            <div class="content-body">
            ...
            </div>
            <!-- content body-->

            </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