Css - Navbar with Toggle Button Using Bootstrap 5 not working

Bubble
April 25, 2024
70 views
0 votes
2 Answers

I’m working on a web project where I need to implement a responsive sidebar that can be toggled using a button in the navbar.

I’m using Bootstrap for the layout, and I’ve encountered some difficulties in achieving this functionality. The sidebar should be hidden by default on mobile devices and only displayed when the user clicks on a menu button in the navbar. On larger screens, the sidebar should be visible without any additional interaction. I’ve tried using media queries in CSS to control the visibility of the sidebar based on screen size, and I’ve implemented JavaScript functionality to toggle the sidebar when the menu icon in the navbar is clicked. However, when I clicks on menu icon, the sidebar is not display.

Could someone please provide guidance on how to properly implement this responsive sidebar feature using Bootstrap 5?

function toggleSidebar() {
  var sidebar = document.getElementById("sidebar");
  if (sidebar.classList.contains('show')) {
    sidebar.classList.remove('show');
  } else {
    sidebar.classList.add('show');
  }
}

.sidebar {
  min-height: calc(100vh - 56px);
  width: 240px;
}

@media (max-width: 767.98px) {
  .sidebar {
    display: none;
  }
}

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 20px 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid #e7e7e7;
  }
}

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" onclick="toggleSidebar()">
            <span class="navbar-toggler-icon"></span>
        </button>
  </div>
</nav>

<!-- Sidebar -->
<div class="d-flex flex-column flex-shrink-0 bg-light sidebar d-none d-lg-block">
  <a href="#" class="d-block p-3 link-dark text-decoration-none" aria-label="Sidebar">
    <span class="fs-5">Sidebar</span>
  </a>
  <ul class="nav nav-pills flex-column mb-auto">
    <li class="nav-item">
      <a href="#" class="nav-link" aria-current="page">Dashboard</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link link-dark">Orders</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link link-dark">Products</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link link-dark">Customers</a>
    </li>
  </ul>
</div>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Content Area -->
<div class="container-fluid main-content">
  <div class="row">
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      <div class="pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Content Area</h1>
      </div>
      <h4>Main</h4>
    </main>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Answers

I added another button in the navbar, other than the navbar-toggler which is meant for mobile responsive manipulation for the navbar. It is in this button that I added the onclick="toggleSidebar()"
I added two classes, show and hide in the CSS.
I removed the d-lg-block class from the sidebar.
Added id="sidebar" to the sidebar element to be identified by ID.
In the toggleSidebar function, when I add hide I remove show from the classList and vice versa.

You can see the working code below:

function toggleSidebar() {
  let sidebar = document.getElementById("sidebar");
  if (sidebar.classList.contains('show')) {
    sidebar.classList.remove('show');
    sidebar.classList.add('hide');
    console.log('show')
  } else {
    sidebar.classList.add('show');
    sidebar.classList.remove('hide');
    console.log('hide')
  }
}

.sidebar {
  min-height: calc(100vh - 56px);
  width: 240px; 
}

.show {
  display: inline !important;
}

.hide {
  display: none !important;
}

@media (max-width: 767.98px) {
  .sidebar {
    display: none;
  }
}

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 20px 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid #e7e7e7;
  }
}

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" 
      data-bs-toggle="collapse" data-bs-target="#navbarNav" 
      aria-controls="navbarNav" 
      aria-expanded="false" 
      aria-label="Toggle navigation" >
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <button class="btn btn-white shadow" onclick="toggleSidebar()">
       <span class="navbar-toggler-icon"></span> Change
    </button>
  </div>
</nav>

<!-- Sidebar -->
<div class=" bg-light sidebar show" id="sidebar">
  <a href="#" class="d-block p-3 link-dark text-decoration-none" aria-label="Sidebar">
    <span class="fs-5">Sidebar</span>
  </a>
  <ul class="nav nav-pills flex-column mb-auto">
    <li class="nav-item">
      <a href="#" class="nav-link" aria-current="page">Dashboard</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link link-dark">Orders</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link link-dark">Products</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link link-dark">Customers</a>
    </li>
  </ul>
</div>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Content Area -->
<div class="container-fluid main-content">
  <div class="row">
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      <div class="pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Content Area</h1>
      </div>
      <h4>Main</h4>
    </main>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

If your Bootstrap 5 navbar toggle button isn’t working, it could be due to several reasons, such as incorrect implementation or missing JavaScript dependencies. Here’s a step-by-step guide to ensure proper implementation:

 1. **Ensure Bootstrap CSS and JavaScript**: Make sure you have included Bootstrap CSS and JavaScript files in your HTML document. You can either download Bootstrap files or use a CDN.

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

 2. **Correct Navbar Structure**: Ensure your navbar has the correct structure with the appropriate classes for toggling.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Service</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
        <!-- Add more navbar items as needed -->
      </ul>
    </div>
  </div>
</nav>

 3. **Ensure Bootstrap JavaScript Dependencies:** Make sure you have included the required JavaScript dependencies for Bootstrap to handle the toggle functionality. This includes Popper.js, a required dependency for dropdowns and popovers.

<!-- Bootstrap JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Navbar with Toggle Button Using Bootstrap 5 not working

Answers