<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33515c5c47404741524373061d001d031e525f435b5202">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<style>
a {
color: #e02846;
text-decoration: none;
}
a:hover {
color: wheat;
}
.nav-div {
background-color: #1A1A40;
width: 100%;
margin-bottom: 15px;
}
</style>
</head>
<body>
<header>
<div class="nav-div">
<div class="boot-nav" style="padding: 10px;">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="images/youtube-128.png" alt="Logo" width="35" height="29" class="d-inline-block align-text-top"> MyTube
</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" id="navbarNav">
<ul class="navbar-nav ms-auto" style="text-align: right; border-bottom: 1px solid #aaa;">
<li>
<a href="./index.html">
<h3>home</h3>
</a>
</li>
<li>
<a href="index.html">
<h3>Contact</h3>
</a>
</li>
<li>
<a href="index.html">
<h3>About</h3>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5e4558455b460a071b030a5a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>I aim to craft a dynamic navigation bar that adapts to different screen sizes. On smaller devices, a toggle button should appear for list items with a bottom border for separation. Conversely, on larger screens, the bottom border in list items should be removed.
` MyTube
<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" id="navbarNav">
<ul class="navbar-nav ms-auto" style="text-align: right; border-bottom: 1px solid #aaa;">
<li><a href="./index.html"><h3>home</h3></a></li>
<li><a href="index.html"><h3>Contact</h3></a></li>
<li><a href="index.html"><h3>About</h3></a></li>
</ul>
</div>
</nav>`
Upon including the border-bottom: 1px solid #aaa style in my unordered list, I noticed an issue as depicted in these images: large device view
An undesired bottom border surfaces, and when toggled on a smaller device Small device view only the last item displays a bottom border