Bootstrap Collapsed menu opening then immediately

Question

I have a site using bootstrap. See running version here: www.ecomportal.co.za.

When the window size reduces to mobile, the navbar menu correcly collapses to the usual 3-stripe button. My problem is that when I click this button to open the menu, it opens, but then immediately collapses again.

I dont know where to start looking to resolve this problem.

Please help?

Answer 1

The issue resides in the opening mechanisms not the closing :

It only closes on the second click, but it never opens on the first click due to height = 0 of the navbar. Do you have a special JS or CSS running on your site ?

If not, find two possible and likely solutions in this post. The first answer is the solution. Second one is a suggestion for your problem.

Plus the data-target attribute starts with a . ,not sure if you intended that (just an observation)

Good luck

Answer 2

If you want to resolve the issue keep, Use the same version of bootstrap css & js

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>

Answer 3

You have Version Mismatch in bootstrap.css and bootstrap.js file/cdn. check once and you will realize the cause.

Answer 4

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.

Answer 5

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;
}

Answer 6

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