'Bootstrap navigation button isn't working on mobile version

I tried to make an responsive bootstrap navigation bar but something isn't working. I even copy/paste the bootstrap navbar example and still the button doesn't show the menu when I click on it.

Can you help me solve it ?

        <div class="header">
            <nav class="navbar navbar-expand-lg cust">
                <div class="container">
                    <a class="navbar-brand pSize" href="#">
                        <img src="log.png" class="d-inline-block imgBrandSize">
                        Logo
                    </a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <i class="fa-solid fa-bars fa-lg"></i>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Text</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Text</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Text</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
htmlcss


Solution 1:[1]

<div class="header">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand pSize" href="#">
                <img src="log.png" class="d-inline-block imgBrandSize">
                Logo
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Text</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Text</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Text</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

this is working properly. This is Bootstrap-5. Please use data-bs-toggle and data-bs-target insted of data-toggle and data-target

Solution 2:[2]

Please Check This Code

  • I hed Two changes in your code. This Is Bootstrap v4.0.0

     <div class="header">
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container">
         <a class="navbar-brand pSize" href="#">
             <img src="log.png" class="d-inline-block imgBrandSize">
             Logo
         </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse"
             data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
             aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav ms-auto">
                 <li class="nav-item">
                     <a class="nav-link" href="#">Home</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="#">Text</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="#">Text</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="#">Text</a>
                 </li>
             </ul>
         </div>
     </div>
 </nav>

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Margish Patel

Related Questions