Bootstrap 4 navbar collapse does not work [doesn’t stay open]

Tags: , , , ,



I am trying to implement a Navbar using Bootstrap 4. Currently, the Navbar correctly collapses when the viewport is shrunk to mobile size. However, when attempting to open the menu, it does open and then closes rapidly. Here www.vitaminak.com.br and here just with the code bellow: http://www.vitaminak.com.br/nav/ you can check that it demonstrates this behavior. I have attached the HTML as well.

<!DOCTYPE html>
<html>
<head>
	<base href="/" />
	<title>Vitamina K</title>
	
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
			integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
			crossorigin="anonymous">
	
	<!-- Vitamina K CSS -->
	<link rel="stylesheet" href="http://www.vitaminak.com.br/css/style.css">
	
</head>
<body>
			<!-- NAV -->
			<nav class="navbar navbar-expand-md sticky-top navbar-expand-lg navbar-light bg-light navbar-light">
				<div class="container">
					<a class="navbar-brand pr-3 btn-roll" href="#home"><img src="http://www.vitaminak.com.br/images/vk-logo.svg" alt="Vitamina K" width="120"></a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarToggler">
						<ul class="navbar-nav ml-auto text-uppercase text-truncate">
							<li class="nav-item"><a class="nav-link" href="#">MENU_NAV_1</a></li>
							<li class="nav-item"><a class="nav-link" href="#">MENU_NAV_2</a></li>
							<li class="nav-item"><a class="nav-link" href="#">MENU_NAV_3</a></li>
							<li class="nav-item"><a class="nav-link" href="#">MENU_NAV_4</a></li>
							<li class="nav-item"><a class="nav-link active" href="#">MENU_NAV_5</a></li>
						</ul>
					</div>
				</div>
			</nav>

		  <!-- Bootstrap JS -->
		<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
			integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
			crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
			integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
			crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
			integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
			crossorigin="anonymous"></script>
  </body>
</html>

Steps I have taken:

  1. Removing all custom CSS
  2. Ensuring jQuery link is before Bootstrap JS file
  3. CSS tags in the header
  4. Script tags in the footer
  5. Copy and paste exact examples from Bootstrap Docs (and I get the same behavior)
  6. Ensuring that JS is being used in the Chrome browser
  7. Validated HTML using WC3 validator

And of course, read various posts on SO about this issue but none lead to a resolution. Does anyone know why this keeps happening?

Thanks for the help in advance!

Answer

you are adding the below css in your style.css

.collapse {
    display: none !important;
}

kindly remove this css from your style.css file then check your header it works fine.

I hope this will work for you.

Thank you…



Source: stackoverflow