Working on integrating my Umbraco site with Bootstrap, and I have a partial view that includes a navigation menu. Everything seems to be functioning as expected except for the navbar.
The issue is that when you click on the button to expand it, it immediately snaps back up. Toggling it again makes it almost 'pop into existence' before moving back up to close. Here is the full output of the DOM:
<html class="gr__localhost"><head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title></title>
<link rel="stylesheet" href="/css/master_styles.css">
<style>@media print {#ghostery-purple-box {display:none !important}}</style></head>
<body data-gr-c-s-loaded="true">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarNav" aria-expanded="false" style="height: 0px;">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Pumpkin's Blog</h1>
<p>Welcome to my blog. I'm always posting things like</p>
<ul>
<li>Photos</li>
<li>Videos</li>
<li>Arts and Crafts</li>
<li>Structural Cardboard Architecture </li>
</ul>
<p>I hope you stick around and comment. </p>
</div>
</div>
</div>
<div id="footer">
Copyright 2018
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script id="wappalyzer" src="chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js"></script></body></html>