How to Add Hamburger Menu in Bootstrap

How to add hamburger menu in bootstrap

All you have to do is read the code on getbootstrap.com:

Codepen

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">  <div class="container">    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">                    <span class="sr-only">Toggle navigation</span>                    <span class="icon-bar"></span>                    <span class="icon-bar"></span>                    <span class="icon-bar"></span>                </button>    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      <ul class="nav navbar-nav">        <li><a href="index.php">Home</a></li>        <li><a href="about.php">About</a></li>        <li><a href="#portfolio">Portfolio</a></li>        <li><a href="#">Blog</a></li>        <li><a href="contact.php">Contact</a></li>      </ul>    </div>  </div></nav>

Bootstrap Hamburger icon not visible

The Reason you cant see the Hamburger-button is because bootstrap hardcoded Icons as background-images to specific navbar-configurations. There are for example .navbar-light and .navbar-dark
When you add Nav-Elements they get styled according to the navbar-scheme so the toggler for the hamburger is coded:

.navbar-dark .navbar-toggler-icon {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);
}

So a way to make this work with your code: Use the Navbar-class from bootstrap to configure the Element-style and use a custom background, see the example with added comments to the changes i made here:

/* Modify the background color */

/*changed class-name*/
.bg-custom {
  background-color: #004d99;
}


/* change the brand and text color */

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  color: white;
}


/* change the link color */

.navbar-custom .navbar-nav .nav-link {
  color: white;
}


/* change the color of active or hovered links */

.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
  color: white;
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>
<!--changed navbar-class to basic bootstrap class-->
<nav class="navbar navbar-dark bg-custom">
  <div>
    <a class="navbar-brand" href="/"><strong>The Brand</strong></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation" style="color: white">
           <span class="navbar-toggler-icon" style="color: white"></span><small><strong> START</strong></small>
         </button>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Bootstrap 5.0.2 hamburger menu not working

Your data attributes are incorrect. Instead of naming them data-bs-toggle and data-bs-target you named them without the -bs and they would not work.

See the code below and running example:

<button class="navbar-toggler" style="margin-right:5px !important;" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
    <span class="navbar-toggler-icon"></span>
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg navbar-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sample</a>

    <button class="navbar-toggler" style="margin-right:5px !important;" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
              </button>
    <div class="collapse navbar-collapse top_nav" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto ">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <hr class="hr_nav">
        </li>
        <li class="nav-item "><a href="#" class="nav-link">About Us</a>
        </li>
        <li class="nav-item "><a href="#" class="nav-link">Support</a>
        </li>
        <li class="nav-item "><a href="#" class="nav-link">Contact Us</a>
        </li>
      </ul>
      <ul class="navbar navbar-nav navbar-right" style="display:flex;">
        <li>
          <button class="btn top_login">
                    Login
                </button>
        </li>
        <li>
          <button class="btn sign_btn">
                    SignUp
                </button>
        </li>
      </ul>
    </div>
  </div>
</nav>

Bootstrap hamburger menu with react

You need to import bootstrap JS too...

import * from 'bootstrap'

Then the Navbar data-bs- attributes will work as expected...

https://codeply.com/p/Wz416Uc9kC

How to Add Hamburger Menu in Bootstrap