Recently, I made the switch from Bootstrap 4 to Bootstrap 5 for my template. Surprisingly, I didn't encounter this issue with Bootstrap 4. Initially, I suspected that adding a flex container inside the navbar might be causing the problem, but that doesn't seem to be the case. The fixed navbar on mobile devices scrolls down slightly, even though it has position:fixed. How is this even possible?
You can see the live version here
<nav
class="navbar navbar-expand-lg navbar-light fixed-top"
style="background-color: #ffffff"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img
id="logosvg"
src="assets/img/mine.svg"
height="40px"
alt="Myne social logo"
style="margin-top: 0.5em; margin-left: 0.5em"
/></a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"
></span>
</button>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarNav"
>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#aboutus"
>About us</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#mynepulse">Myne Pulse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#instantgratification"
>Instant Gratification</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#partners">Our Partners</a>
</li>
<li class="nav-item desktop">
<a
href=""
target="_blank"
><button type="button" class="blue">Get Started</button></a
>
</li>
</ul>
</div>
</div>
</nav>
Update: As shown in the screenshot, when viewing on mobile and scrolling down, the top bar moves slightly up and then returns to its position when scrolled up.