Navbar

Powerful and responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for the collapse plugin.

Bootstrap Navbar documentation

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

        
          <script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

        
          <script>
            (function() {
              // INITIALIZATION OF NAVBAR
              // =======================================================
              new HSHeader('#header').init()
            })()
          </script>

Using mega menu with header

Copy-paste the stylesheet <link> into your <head> to load the CSS.

        
          <link rel="stylesheet" href="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

        
          <script src="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

        
          <script>
            (function() {
              // INITIALIZATION OF MEGA MENU
              // =======================================================
              const megaMenu = new HSMegaMenu('.js-mega-menu').init();
            })()
          </script>

Basic

Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors.

Height

Use .navbar-height for fixed height navbar.

Shadow

Use .navbar-shadow to add shadow.

By default, navbars are left aligned.

Use .navbar-end class to right align the navbar

With hs-mega-menu.js

Want to add show/hide animations or change the event type to hover? hs-mega-menu.js is the way to do them and many more.

Vertical

Create a vertical navigation with .navbar-vertical.

Toggler

Navbar will be collapsed below medium size resolution. Reduce browser size to see it in action.

Responsive behaviors

Placement classes can utilize .navbar-*{-sm|-md|-lg|-xl}. Learn more placement behaviors.

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don't add any .navbar-expand class.

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-header-options='{}'.

Parameters Description Default value

fixMoment

 The distance after which the js-navbar-fix-moment class will be added to the initialized element, which initializes the animation specified in fixEffect 0

fixMomentClasses

 If the header contains elements with the class navbar-section, then it adds the classes specified in 
                    
                      data-hs-header-item-options='{
                        "fixMomentClasses": "bg-dark"
                      }'
Otherwise, it searches for the given parameter in data-hs-header-options and adds classes to the header. These classes are added when the scroll value is greater than or equal to the value in fixMoment 		null

fixMomentExclude

 If the header contains elements with the class navbar-section, then removes the classes specified in the elements 
                    
                      data-hs-header-item-options='{
                        "fixMomentExclude": "bg-white"
                      }'
Otherwise, it looks for this parameter in data-hs-header-options and removes the classes from the header. These classes are deleted when the scroll value is greater than or equal to the value in fixMoment 		null

fixEffect

 Determines with what effect the initialized element disappears. There are 2 options: slide, fade 'slide'

breakpoint

 Determines with what permission the plugin is initialized. 'lg'

Placement classes

List of available classes and their descriptions.

Parameters Description

.navbar-absolute-{media-type}-top

 Practically the same as static, but the geometry of this type of header is not taken into account when rendering the page (because of position: absolute;). This type of header is well suited for transparent/half-transparent header designs that are displayed on top of the slider/hero/etc. Its geometry is taken into account when rendering a page.

Behaviors

List of available classes and their descriptions.

Parameters Description

.navbar-show-hide-{media-type}

 Show/hide an item when scrolling to the user specified time. This moment is given in the form of the number of scrolled pixels, through the attribute data-navbar-fix-moment="". There are 3 available options for how to show/hide an element using the data-navbar-fix-effect="" attribute:
  • slide
  • fade
  • show-hide

.navbar-change-logo-{media-type}

 Changes the logo at the time specified by the user. This moment is given in the form of the number of scrolled pixels, through the attribute data-navbar-fix-moment="".

.navbar-change-appearance-{media-type}

 Changes the appearance of the sections at the time specified by the user. This moment is given in the form of the number of scrolled pixels, through the attribute data-navbar-fix-moment="" This approach allows you to manage styles without !important CSS parameter.
For example: 
                    
                      <div class="navbar-section navbar-section-light bg-secondary"
                           data-navbar-fix-moment-exclude="bg-secondary"
                           data-navbar-fix-moment-classes="bg-primary">
In this case, to change the section from gray to dark, we remove bg-secondary (which by default is on this element) and add bg-primary.

.navbar-toggle-section-{media-type}

 Show/hide one of the header sections (preferably the very first) at the user specified time. This moment is specified as the number of scrolled pixels, through the attribute data-navbar-fix-moment="". For this, the section itself needs to be given the class .navbar-section-hidden.

.navbar-invulnerable-{media-type}

 This class is auxiliary and is used to reset the previous behavior (with the previous permission, if the user has changed the window size) on a certain viewport. For example, if the user wants to open/show a section on -xs, -sm, but not higher. (Because Front alike Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries.), having set -sm it will work and on permissions above, in order to prevent it use this class.
For example: 
                    
                      <header class="navbar-toggle-section navbar-invulnerable-md">
                        ...
                      </header>
here the behavior of toggle-section will work until the resolution is -md (that is, xs, sm), on viewport -md it will not work.

For example:

        
          <header class="navbar-show-hide-lg navbar-absolute-lg-top">
            ...
          </header>

Behavior examples

These placement classes can have the following behavior classes Description

.navbar-absolute-{media-type}-top
  • .navbar-show-hide-{media-type}
  • .navbar-change-logo-{media-type}
  • .navbar-change-appearance-{media-type}