Side navigation does not work when I use external CSS but does work with internal CSS in HTML

  css, html, javascript

I’m new to HTML and CSS. As I’m trying to create my portfolio website. I run into a couple of problems that I have not been able to figure out yet. When I was coding a side animated navigation bar and used internal CSS in HTML the side navigation worked well. However, as I take the advice of other people, putting CSS code into a separate CSS file. My navigation bar has stopped working as it’s intended. I’ve been trying to check the path of the CSS file and even moved the path to the head but it didn’t work either. I hope you guys can give me a hint on this one as I’m not sure what I did wrong. Thank you all
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="portfolio.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
title>Nin</title>
</head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Source+Code+Pro:[email protected]&display=swap" rel="stylesheet">
<body>
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#">about me</a>
        <a href="#">contact</a>
        <a href="#">projects</a>
        <a href="#">resume</a>
    </div>
    <span style="color: white; font-size:30px; cursor:pointer" onclick="openNav() ">&#9776</span>
</body>

</html>

CSS

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    display: block;
    transition: 0.3s;
}
.sidenav a:hover {
    color: #f1f1f1;
}
.sidenav .closebtn{
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

JS

function openNav() {
    document.getElementById("mySidenav").style.width = "250px"

}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0"

}

Source: Ask Javascript Questions

LEAVE A COMMENT