I am working with a collapsible bootstrap NavBar that contains two elements within the collapsible <div>,
<form class="form-inline> and
<select class="custom-select" id="menu">(Refer to my code below)
The problem I'm encountering is that when I expand the collapsible area, the two elements are momentarily cut off and then quickly realign themselves under the NavBar-Brand (You can observe this behavior here). It seems like they do not initially align properly with the Brand in the navbar. I've been unable to find a solution to this issue. Any suggestions or advice would be greatly appreciated. Thank you!
HTML:
<nav class="navbar fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Airforce Inventory Information Database</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar9" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button>
<div class="collapse navbar-collapse" id="navbar9">
<div class="interior">
<ul class="navbar-nav ml-auto">
<form class="form-inline" data-toggle="#octopart" action="http://octopart.com/search" style="padding-top: 10px;">
<input class="form-control mr-sm-2" type="search" name="q" placeholder="Search Octopart ..." name="search" style="width: 45%;">
<button class="btn btn-outline-success my-2 my-sm-0" data_target="#octopart" type="submit"><i class="fa fa-search"></i></button>
</form>
<div class="input-group mb-3" data-toggle="#parts" style="width: 35%; padding-top: 5px; padding-bottom: 10px;">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Devices</label>
</div>
<select class="custom-select" id="menu">
<option value='capacitors'>Capacitors</a></option>
<option value='inductors'>Inductors</a></option>
<option value='resistors'>Resistors</a></option>
<option value='miscellaneous'>Miscellaneous</a></option>
</select>
</div>
</ul>
</div>
</div>
</div>
</nav>