Navbar toggle button opens then immediately closes

Question

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.

score 42 · Accepted Answer · edited Mar 14 '21 at 08:03

42

I was using a bootstrap 2.x CSS file, along with a bootstrap 3.x js file.

edited Mar 14 '21 at 08:03

Web Developer

333
4
17

answered Apr 11 '16 at 07:35

Shawn de Wet

5,642
6
57
88

3

This was exactly my problem, except using collapse and with bootstrap 4 css, v3 js. Thanks :D – Jono Sep 29 '17 at 14:51
I just had exactly this, where more than one copy of bootstrap (slightly different versions) were being included in a project - crazy collapses ahoy. Stripped them out and put them all back in to the main template where they should be and all seems happy! – matt.chatterley Jul 20 '18 at 12:21
1

Yep, did it for me - Bootrap 4 CSS with Bootstrap 3 JS... fail! – Cameron Forward Oct 30 '18 at 23:45
1

duh! wasted 3 hours and come to this!! – Anupam Jan 13 '20 at 11:57

score 18 · Answer 2 · answered Sep 02 '19 at 13:38

18

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

answered Sep 02 '19 at 13:38

Mehravish Temkar

4,275
3
25
44

2

This was the best answer for me! I was using datetimepicker for Bootstrap 3 on a site with a Bootstrap 4 UI. But with this quick fix, the problem was gone! Thank you! – GTS Joe Jul 15 '20 at 18:15
2

best answer for me. – Anjali Sharma Sep 01 '20 at 05:26
2

thanks man!, Best answer when you could have different versions of files. – AlejandroDG Nov 02 '20 at 14:15

score 2 · Answer 3 · edited Aug 14 '20 at 03:40

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>

score 1 · Answer 4 · answered Jul 17 '18 at 09:32

1

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

answered Jul 17 '18 at 09:32

Danny

11
2

1

Do you mind giving some more explanations on how this solves the problem ? – Gar Jul 17 '18 at 09:38
The bootstrap link I was using was outdated, hence why the dropdown would not stay open. Very simple fix, always make sure the proper source is used. – Danny Jul 19 '18 at 11:30
Same for me. I was using the CSS from the CDN and an older version of the JavaScript in a local folder. Pointing both the CSS and the JavaScript to the newest CDN fixed the issue. – Meca Aug 07 '19 at 18:45

score 0 · Answer 5 · answered Jul 17 '19 at 14:16

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.

score -1 · Answer 6 · edited May 23 '17 at 11:46

-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

edited May 23 '17 at 11:46

Community

1
1

answered Mar 20 '16 at 06:15

H.B

107
7

Thanks @H.B I checked out that second answer on the post you referred to, but my scripts are already without the type="text/javascript" mentioned there. – Shawn de Wet Mar 24 '16 at 03:20
I am still convinced some CSS or JS is fixing the height of the div to 0, you can check that by inspecting the div element on your browser and trying to open the navbar. It changes classes and styles correctly but the height is set to 0. Double check on all the website project css files then JS. I actually happened to me very recently and it took me a week to finally figure it out – H.B Mar 24 '16 at 06:54

Navbar toggle button opens then immediately closes

6 Answers6