Bootstrap menu icon moves up when clicked - html

Question

TLDR:
How do I stop the bootstrap menu (hamburger) icon from moving up when clicked, (I need it to stay fixed on the navbar)
How do I position the "Book" button so that it stays on top right of the navbar after expanding the menu. (fixed position top right)
I created a simple bootstrap menu which works perfectly on desktop. On mobile however I get this weird behaviour where
when the menu icon is clicked: it shifts a few pixels upwards, then when the menu is closed it shifts back to it's normal position.
After doing a few usability tests, this behaviour has been identified as annoying. It's also been identified that the "Book" button which shows on the closed navbar on mobile moves to the bottom of the navbar when it's opened. Is it possible to stop this behaviour? I would like the button to stay top right when the menu is opened.
Html Code:
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">Vans</a>
</li>
<li class="nav-item">
<a class="nav-link">Contract</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">App</a>
</li>
</ul>
</div>
<form class="form-inline my-2 my-lg-0">
<a class="btn btn-outline-primary btn-book my-2 my-sm-0" >Book</a>
</form>
</div>
</nav>

Answer 1

Your menu button is moving because of the "Book" button.
Insert it before the collapse element, rearrange your elements with order-lg-1 and order-lg-2 and it should work just fine.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline my-2 my-lg-0 order-lg-2">
<a class="btn btn-outline-primary btn-book my-2 my-sm-0" >Book</a>
</form>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto order-lg-1">
<li class="nav-item active">
<a class="nav-link">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">Vans</a>
</li>
<li class="nav-item">
<a class="nav-link">Contract</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">App</a>
</li>
</ul>
</div>
</div>
</nav>