0

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()">&times;</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()">&#9776; 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;
}

1 Answer 1

0

It turned out the problem was I'd set the z index to -1 in style.css , I changed it to 1 and it fixed it.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .