I have implemented a Bootstrap 4 navbar with a brand logo image sized at 150px x 33px.
Now, I want to increase the height of the navbar to 80px. To do this, I added min-height: 80px; in my CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link href="../system/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<style>
.navbar {
min-height: 80px;
background-color: #FFFFFF;
border-bottom-color: #D8D8DD;
border-bottom-style: solid;
border-bottom-width: 1px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<a class="navbar-brand" href="#"><img src="logo-placeholder-150px-33px.png" ></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation01">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation01">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active " href="#">Item 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
</ul>
</div>
</nav>
<script src="../system/jquery/dist/jquery.js"></script>
<script src="../system/popper.js/dist/popper.js"></script>
<script src="../system/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
When viewed on smaller screens, the menu collapses correctly and the hamburger icon is displayed.
However, when I click on the hamburger icon to open the menu, the position of the logo and the icon shift slightly towards the top.
https://i.stack.imgur.com/eQyNi.png
How can I resolve this issue?