CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4flexbox
Kamrul Islam
Kamrul Islam

Reputation: 265

bootstrap hamburger menu is collapsing with the nav items on mobile view

Whenever I click on the hamburger menu icon it collapses with the nav-items! what should I do to fix this issue now?

Navbar

<header>
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm-12">
                    <nav class="navbar navbar-toggleable-md fixed-top d-flex justify-content-center">
                        <a class="navbar-brand animated  heartBeat delay-.5s" href="#home"><img class="img-fluid logo"
                                src="./Assets/Logos/LogoMakr_8A9Y2n.png" alt=""></a>
                        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                            data-target="#vesco-menu" aria-controls="vesco-menu" aria-expanded="false"
                            aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"><i class="fas fa-bars"
                                    style="color:#fff; font-size: 30px; "></i>
                            </span>
                        </button>
                        <div class="collapse navbar-collapse justify-content-end" id="vesco-menu">
                            <div class="navbar-nav nav nav-pills animated  fadeInRight delay-1s">
                                <a class="nav-item nav-link active" href="#home">Home <span
                                        class="sr-only">(current)</span></a>
                                <a class="nav-item nav-link" href="#project">portfolios</a>
                                <a class="nav-item nav-link" href="#skills">skills</a>
                                <a class="nav-item nav-link" id="downlink" href="./Assets/RESUME.docx"
                                    download>Resume</a>
                                <a class="nav-item nav-link" href="#testimonials">Testimonials</a>
                                <a class="nav-item nav-link" href="#contact">CONTACT ME</a>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>

my navbar image

Upvotes: 1

Views: 711

Answers (1)

Nisharg Shah
Nisharg Shah

Reputation: 19532

In my machine it works fine, I think the problem is in your custom CSS but I show one class that not exist in bootstrap 4 so I suggest you to replace it.

Replace navbar-toggleable-md with navbar-expand-md

Upvotes: 1

Related Questions