This is the code in question.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<script src="myscript.js"></script>
<title>malevolentdonut</title>
</head>
<body>
<div class = "menu">
<a href= "javascript:void(0)" class= "closebtn" onclick="closeNav()">×</a><br>
<a href= "#" >Bio</a>
<a href= "#" >Songs</a>
<a href= "#" >Photos</a>
<a href= "#" >Contact Me</a>
</div>
<div id = "main">
<span class= "openbtn" onclick= "openNav()">☰ Menu</span>
<p> <br>
<h3>Announcements</h3>
<hr>
Cutting out a few songs from my song list. Only the best of the best for my patrons! <br> <br>
<img src= "lumberjack.jpg">
</p>
</div>
</body>
</html>
In the first div are contained buttons that lead to other pages in the site. When I first coded them they all worked 100%. However as I made a 2nd div, at some point when I started the first p (paragraph), the more text I wrote, the more buttons started progressively not working. By not working, I mean hovering over them doesn't make the cursor a pointer, and clicking on them does nothing as well. This is very strange. Here is the style.css file's contents if you think it's relevant:
.menu a {
text-decoration: none;
color: #818181 ;
padding: 8px 8px 8px 32px;
display: block ;
transition: 0.3s; /* Try to remove this and see what happens without it. */
font-size: 25px;
}
.menu {
height: 100%;
width: 0;
padding-top: 60px;
position: fixed;
z-index: -1;
transition: 0.3s;
background-color: Black;
font-size: x-large;
overflow-x: hidden;
font-family: "Trebuchet MS", sans-serif;
line-height: 170%;
}
.menu a:hover{
color: white;
}
.closebtn{
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn{
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover{
background-color: #444;
}
#main{
transition: margin-left 0.5s;
padding: 20px;
}
.centered{
text-align: center;
}