I've been working on setting up a Navbar using Bootstrap 4, and I'm facing an issue where the menu collapses rapidly after opening on mobile view. You can see this behavior in action at www.vitaminak.com.br or with just the code below: . The HTML code is provided 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/popperjs/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>Here are steps I've taken to troubleshoot:
- Removed all custom CSS
- Ensured jQuery link is before Bootstrap JS file
- Moved CSS tags to the header section
- Placed script tags in the footer instead
- Copied exact examples from Bootstrap Docs (with same behavior)
- Confirmed that JS is enabled in Chrome browser
- Validated HTML using W3C validator
I've also read various posts on SO regarding this issue, but haven't found a solution yet. Any insights into why this problem persists?
Appreciate any help in advance!