I've been working on creating a responsive navbar, but I'm facing an issue where the height of the bar doubles between phone screen size and full window size. Despite trying various Bootstrap classes, I haven't had any success in fixing this problem. The navigation bar appears correctly in full-screen format:
https://i.sstatic.net/U0NEN.png
However, when I reduce the browser window size, the navbar's height increases (see image below) which is incorrect:
https://i.sstatic.net/zhejS.png
If anyone could provide insights into what might be causing this issue, it would be greatly appreciated.
<!-- header area start -->
<header id="header">
<div class="header-area">
<div class="container">
<div class="row d-flex align-items-center justify-content-between">
<!-- <div class="menu-area"> -->
<div class="">
<div class="logo px-4">
<h3 style="color: #ffffff;"><a style="color: #ffffff;">Header</a></h3>
</div>
</div>
<div class="col-lg-9 d-none d-md-block">
<div class="main-menu">
...
</div>
</div>
<div class="col-md-12 col-12 d-none d-sm-block d-md-none d-block d-sm-none">
<div class="mobile_menu"></div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header area end -->
.header-area{position:fixed;left:0;top:0;width:100%;z-index:998;background-color:#27ae60}
.menu-area{display:flex;align-items:center}
.logo h3{font-family:'Lato',sans-serif;color:#fff}
.logo a{display:inline-block;font-family:'Lato',sans-serif;color:#fff;font-size:18px}