My Fixed-Top navbar is causing an issue on mobile screens, as it is covering the top content of the page. This problem doesn't occur on PC screens. When I resize the browser width to fit a mobile screen, the navbar overlaps with the body content...
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block">
<!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
<img src="https://via.placeholder.com/40?text=LOGO" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ms-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">How We Help</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="header">
<h1>HEllo world 1</h1>
<h1>HEllo world 2</h1>
</div>
body {
padding-top: 60px;
margin: 0;
}
@media (max-width: 979px) {
body {
padding-top: 0;
}
}
.container-fluid{
margin: 0;
}
I attempted to add top padding for the body, but it disappears when viewed on a mobile screen.