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

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:

Removing all custom CSS
Ensuring jQuery link is before Bootstrap JS file
CSS tags in the header
Script tags in the footer
Copy and paste exact examples from Bootstrap Docs (and I get the same behavior)
Ensuring that JS is being used in the Chrome browser
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…

Advertisement

Answer