Bootstrap navigation button isn't working on mobile version

Issue

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>

Solution

<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

Answered By – Pinal Sukhadiya

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.