Navbar

Explore
- Demos
  - Main Demo
  - Left Side
  - Left Menu
  - Right Side
  - Combo
  - Bootstrap
  - Bootstrap XT
- Documentation
Navigate
- Locations
  - Rentals
    - Housing
      
      Entry
      
      Popular
      
      Premium
      
      Seniors
    - Corporate
    - Industrial
    - Government
  - Integrate
  - Options
  - Account
- Hidden Text Box
  
  This text box is hidden on mobile view, but can be toggled visible.
  
  Features a nice link anchor affected by navbar styling.
- Visible Text Box
  This text box is fully visible on all views and contains a button unaffected by navbar styling.
  
  Read More
Share
- Facebook
- Twitter

Bootstrap Extended Navbar

Unlike the other Bootstrap demo this one showcases how to easily integrate Navbar with its full features and markup with Bootstrap. Only a couple of variables are required with your special flavor and you're ready to go.

Demo Highlights

The build showcases how to recreate the other demo just by using the default Navbar markup and adjusting some variables. It might strike you that you can simply replace the original Bootstrap 4/5 Navbar JavaScript plugin and its CSS sources completely, since Navbar doesn't require Dropdown and Collapse components (and their dependencies) in order to work.
The idea of this demo was to showcase that Navbar can create a more efficient workflow, thanks to the more simple and straightforward markup, a light footprint and powerful SCSS mixins that enable real flexible design.
We've used the same default responsive breakpoint of 768px, and this is another cool thing, you set one value in your SCSS variables and your JavaScript options exactly for your need, and without ALL the other breakpoints that Bootstrap Navbar comes with.

Bootstrap Extended SCSS

In terms of SCSS, this demo is very much the same with the default layout, we only removed a series of style rules with a couple of specific SCSS variable values, just because we can.

// navbar-bootstrap-extended.scss - mixins
@import "variables", "mixins", "root";

@include navbar-mobile-layout;
@include navbar-desktop-layout;
@include navbar-style;
@include nav-layout;
@include nav-style;
@include subnav-style;
@include main-menu;

As you can see, so far bootstrap-extended.scss is identical with navbar.scss, however for this demo we've setup a set of custom CSS variables:

// bootstrap-extended.html - custom CSS variable values
.navbar {
  --nv-font-size: inherit;
  --nv-bg: var(--bs-gray-dark);
  --nv-subnav-bg: var(--bs-gray-200);
  --nv-padding-x: 0.5rem;
  --nv-padding-y: 0.5rem;
  --nv-subnav-padding-x: .5rem;
  --nv-subnav-padding-y: .5rem;
  --nv-item-padding-y: .5rem;
  --nv-item-padding-x: 1rem;
  --nv-item-padding: var(--nv-item-padding-y) var(--nv-item-padding-x);
  --nv-item-hover-bg: rgba(255,255,255,.15);
  --nv-item-hover-color: rgba(255,255,255,.65);
  --nv-item-active-bg: var(--bs-primary);
  --nv-item-active-color: var(--bs-white);
  --nv-subnav-item-hover-color: rgba(0,0,0,.75);
  --nv-subnav-item-hover-bg: rgba(0,0,0,.125);
  --nv-subnav-item-active-color: var(--bs-white);
  --nv-subnav-item-active-bg: var(--bs-primary);
  --nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);
}
@media (min-width: 768px) {
  .navbar {
    --nv-padding-y: 0;
    --nv-item-padding-y: 1rem;
    --nv-item-padding-x: 1rem;
  }
}

since this markup is our Navbar markup we can flex some variables to customize the layout, mainly the spacing;
the rest of it is for the removal of background colors, for all active, hover and default state.

More Demos?

That's it for today, please don't forget to like share and subscribe. Click the notification bell to get notified when we upload new content. We are planning on adding more demos in the future, as time permits.