Navbar toggle button opens then immediately closes

user_374189 0
Viewed 24405

I have a site using Bootstrap.

When the window size reduces to mobile, the Navbar menu correctly collapses to the usual hamburger (3-stripe) button.

My problem is that when I click this button to open the menu, it opens, but then immediately collapses again.

navbar twitter-bootstrap
6 Answers

An in class is added when a click is triggered to open the menu but the collapse class isn't removed. Adding this css for overriding collapse properties worked for me:

.navbar-collapse.in {
    display: block !important;
}
user_68080430

I came across this problem aswell, and fixed it by updating my bootstrap link.

user_100111070

Add these 3 files.. Becuase in order to bootstrap to work you also need to add javascript and jquery in you code.

<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>
user_118990450

I had my .navbar-toggler button as a child element of .navbar-brand, and that caused an immediate open/close of the navigation links when clicking on the toggler button. Moving the button to be a sibling element fixed the issue. Silly mistake, and easy fix.

user_26191960
Related