I have integrated a NavBar using Bootstrap 5, which functions flawlessly. However, I am facing a specific issue that I haven't been able to resolve yet:
When a user increases their screen size to <300%, it triggers the collapse button to appear. If they continue to increase the size to 500%, the collapsed NavBar covers the entire screen and prevents viewing the bottom part of the NavBar. The main problem arises from the fact that the NavBar is fixed at the top of the site, making scrolling ineffective. This forces the user to view a truncated NavBar until they navigate to another page. While this may be a rare scenario, I believe there are various solutions available. One potential option could be designing a new custom layout for the collapsed NavBar or restricting the "fixed-top" attribute only to the non-collapsed state. However, implementing the best solution remains uncertain.
https://i.sstatic.net/aTPa3.jpg
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26444949525552544756661308160817">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style type="text/css">
/* BANNER*/
.bg-steel {
background-color: #000000;
}
/* BRAND */
.site-header .brand {
font-family: 'Arial';
font-size: 300%;
color: #ffffff;
}
/* ROUTES */
.site-header .navbar-nav .nav-link {
font-family: 'Arial';
font-size: 250%;
color: #ffffff;
}
</style>
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top py-0 my-0">
<!-- Navbar Left Side -->
<div class="container d-flex bd-highlight">
<a class="navbar-brand mr-4 brand" href="{% url 'home' %}">MyWebsite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="#">Docs</a>
</li>
</ul>
<!-- Navbar Right Side -->
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="#">Login</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link p-2" href="#">Register</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>