I am facing an issue with my toggle menu where it is not dropping down as a solid black block but instead in the center transparent. How can I fix this to make it drop down as a solid block and be positioned to the left? I have a bootstrap navbar that I modified with external CSS. Despite my efforts to find a solution, I am struggling to resolve the problem. As someone who is new to HTML, CSS, and Javascript, I might not be accurately describing the problem for Google search. Hopefully, someone here understands my issue. Thanks!
.navbar {
background-color: black;
height: 15%;
line-height: 280px;
}
li {
padding-right: 10px;
padding-left: 10px;
}
.collapse {
display: flex;
justify-content: center;
text-align: center;
}
.nav-link {
color: white !important;
font-weight: bold;
font-size: 120%;
font-style: italic
}
.poetry-monkey-logo-center {
height: 15px;
}
.poetry-monkey-logo-center>img {
height: 120px;
width: 130px;
border: 10px solid black;
border-radius: 80%;
margin-top: 40px;
}
/* Remaining CSS styles */
Here is my HTML code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> PoetryMonkey.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Included scripts and links -->
</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm navbar-light p-3 mb-2" >
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Other navbar items -->
</ul>
</div>
</nav>
<!-- Jumbotron and poem sections go here -->
<!-- Footer section -->
<footer class="footer-bs">
<!-- Footer content goes here -->
</footer>
<!-- Optional JavaScript -->
<!-- Scripts included at the end -->
</body>
</html>