My vertical navigation seems to be hidden behind other elements like the h1 heading and post image in this code. When I toggle the navigation, it hides behind the rest of the elements and does not work properly. How can I solve this issue? Please run the code snippets
/* CSS code for Nav Primary */
#nav-primary {
/* Styles for nav */
}
@media only screen and (max-width: 720px) {
/* Responsive styles for nav */
}
/* CSS code for Latest Posts section */
.blog-post {
/* Styles for blog posts */
}
@media only screen and (max-width: 720px) {
/* Responsive styles for blog posts */
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Swan - Bootstrap Blog Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<!-- Navigation Bar -->
</header>
<main>
<!-- Blog Entries and Sidebar -->
</main>
<footer>
<!-- Footer content -->
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
I have been struggling with fixing the issue in my CSS code, but unable to identify the mistake. Despite numerous attempts to resolve it, the problem persists. Your assistance in solving this would be greatly appreciated.