Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Default Navbar
This is navbar with default style
<!-- ========== { HEADER }========== -->
<header>
<!-- Navbar -->
<nav class="main-nav navbar navbar-expand-lg hover-navbar dark-to-light fixed-top navbar-dark">
<div class="container">
<a class="navbar-brand main-logo" href="#">
<!-- <span class="h2 text-white fw-bold mt-2">Onekit</span> -->
<img class="logo-dark" src="../../src/img-min/logo/logo.png" alt="LOGO">
</a>
<!-- navbar toggler -->
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo"
aria-controls="navbarTogglerDemo"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- collapse menu -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo">
<ul class="navbar-nav ms-auto mt-2 mt-lg-0">
<============================
insert your navlink, dropdown and mega menu in here
=============================>
</ul>
<div class="d-grid d-lg-block my-3 my-lg-0 ms-0 ms-lg-4">
<a class="btn btn-warning btn-sm" target="_blank" rel="noopener" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
Buy Now
</a>
</div>
</div><!-- end collapse menu -->
</div><!-- End Navbar -->
</nav>
</header><!-- end header -->
You can add mega menu or dropdown menu in here. Copy dropdown code from mega menu
One Page Navbar
We combine navbar one page with scrollspy
<!-- ========== { HEADER }========== -->
<header>
<!-- Navbar -->
<nav id="main-nav" class="main-nav navbar navbar-expand-lg hover-navbar dark-to-light fixed-top navbar-dark">
<div class="container">
<a class="navbar-brand main-logo" href="#">
<!-- <span class="h2 text-white fw-bold mt-2">Onekit</span> -->
<img class="logo-dark" src="../../src/img-min/logo/logo.png" alt="LOGO">
</a>
<!-- navbar toggler -->
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo"
aria-controls="navbarTogglerDemo"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- collapse menu -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo">
<ul class="navbar-nav ms-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link js-scroll-trigger active" href="#hero">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#faq">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contacts</a>
</li>
</ul>
<div class="d-grid d-lg-block my-3 my-lg-0 ms-0 ms-lg-4">
<a class="btn btn-warning btn-sm" target="_blank" rel="noopener" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
Buy Now
</a>
</div>
</div><!-- end collapse menu -->
</div><!-- End Navbar -->
</nav>
</header><!-- end header -->
For trigger scrollspy functions, you must add id="main-nav" in navbar code
Add scrollspy in one page navigation
For make scrollspy efect in navigation you must add code in html element.
Add scrollspy code in body like this
<body id="page-top" data-bs-spy="scroll" data-bs-target="#main-nav" data-bs-offset="92">
For more header example, you can read in here Header section
Navbar Expand
In default navbar custom from Onekit use navbar-expand-lg. If you want to change navbar expand to -md,-xl or other viewport,
You must change src/scss/onekit/navbar.scss line 132 and 241
And src/scss/onekit/submenu.scss line 108 and 134
// navbar in mobile
@include media-breakpoint-down(lg) {
.navbar-expand {
&-lg {
// code
}
}
}
// navbar in desktop
@include media-breakpoint-up(lg) {
.navbar-expand {
&-lg {
// code
}
}
}
Change (lg) with your navbar-expand-
If you want to use onekit navbar in all expand viewport ( sm, md, lg, xl and xxl )
Replace code with this scss
// navbar in mobile
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} {
@include media-breakpoint-down($next) {
// code
}
}
}
}
// navbar in desktop
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} {
@include media-breakpoint-up($next) {
// code
}
}
}
}