→ Anonymous
→ Responsive Bootstrap Navbar with Mobile ...

Responsive Bootstrap Navbar with Mobile Toggle and Remix Icons

This responsive Bootstrap 5 navbar features a clean and modern design, enhanced with Remix Icons for login and cart functionality. It includes a desktop navigation layout with a logo, links, search bar, and action buttons, while the mobile version adapts seamlessly with a toggle menu. Ideal for e-commerce or multipage websites seeking a sleek and user-friendly header layout.

This bootstrap css example is contributed by Anonymous, on 25-May-2025. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Header

Author Anonymous

v.5.3

Fork Fullscreen

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>

<div class="d-flex align-items-center">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Emirates_logo.svg/131px-Emirates_logo.svg.png" alt="Logo" class="me-2">
        <span class="fw-bold fs-5 d-none d-md-inline">MyStore</span>
      </div>

<nav class="d-none d-md-flex">
        <a href="#" class="nav-link text-dark">Home</a>
        <a href="#" class="nav-link text-dark">Shop</a>
        <a href="#" class="nav-link text-dark">About</a>
        <a href="#" class="nav-link text-dark">Contact</a>
      </nav>

<div class="d-flex align-items-center">
        
        <div class="d-none d-md-block me-3">
          <input type="text" class="form-control form-control-sm" placeholder="Search...">
        </div>
        <a href="#" class="btn text-dark d-none d-md-block">
          <i class="ri-login-circle-line"></i>
        </a>
        <a href="#" class="btn text-dark d-none d-md-block">
          <i class="ri-shopping-cart-2-line"></i>
        </a>

<button class="btn btn-outline-secondary d-md-none" id="menuToggle">
          <i class="ri-menu-line"></i>
        </button>
      </div>
    </div>

<div id="mobileMenu" class="d-md-none mt-2">
      <nav class="mb-3 d-flex flex-column align-items-center">
        <a href="#" class="nav-link text-dark">Home</a>
        <a href="#" class="nav-link text-dark">Shop</a>
        <a href="#" class="nav-link text-dark">About</a>
        <a href="#" class="nav-link text-dark">Contact</a>
      </nav>
      <div class="mb-3">
        <a href="#" class="btn w-100 mb-2">
          <i class="ri-login-circle-line"></i>
        </a>
        <a href="#" class="btn w-100 mb-2">
          <i class="ri-shopping-cart-2-line"></i>
        </a>
      </div>
      <input type="text" class="form-control" placeholder="Search...">
    </div>
  </div>
</header>

More Examples

Rotating Navigation Animation
Rotating Navigation Animation

Author:
Rami AlAjo

3 months ago

790

v.4.6
Responsive Bootstrap Navbar with Mobile Toggle and Remix Icons
This responsive Bootstrap 5 navbar features a clean and modern design, enhanced with Remix Icons for login and cart functionality. It includes a desktop navigation layout with a logo, links, search bar, and action buttons, while the mobile version adapts seamlessly with a toggle menu. Ideal for e-commerce or multipage websites seeking a sleek and user-friendly header layout.

Author:
Talha Abdullah Bangyal

22 hours ago

21

v.5.3
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

8 months ago

953

v.4.6
Hidden Search Widget
Hidden Search Widget

Author:
Rami AlAjo

3 months ago

499

v.4.6
Sticky Table Headings Example

Author:
Anonymous

1 week ago

208

v.5.3
Bootstrap 5.3 Testimonial Card Component

Author:
Levi Treadwell

5 months ago

471

v.5.3
Responsive image galary with tabs

Author:
Arturo

5 months ago

2.7k

v.5.3
Animated hero section

Author:
Anonymous

1 year ago

3.5k

v.5.3
Basic Footer
Standard footer example with bootstrap 5

Author:
Mateo Rojas

5 months ago

4.1k

v.5.3
Music speakers status

Author:
Jonathan

3 weeks ago

163

v.5.3
Footer
Simple footer with social icons

Author:
Prajwal Hallale

1 year ago

5k

v.5.3
Interactive Service Cards | Bootstrap 5.3
Modern Bootstrap 5.3 component with elegant card rotations and hover animations. Perfect for featuring services, products, or team members

Author:
Anonymous

5 months ago

3.7k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent