Добавляю класс в тег div, но свойства не применяются к элементам
вот JS
function myFunction() {
var x = document.getElementById("myTopnav");
if ( document.getElementById("myTopnav").classList.contains("responsive") ) {
document.getElementById("myTopnav").classList.remove("responsive");
} else {
document.getElementById("myTopnav").classList.add("responsive");
}
}
вот CSS
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
a {
text-decoration: none;
}
li {
text-decoration: none;
list-style: none;
}
.logo {
background: black;
width: 100%;
display: flex;
justify-content: center;
}
.graficlogo {
padding: 5px;
max-width: 100%;
box-sizing: border-box;
}
nav {
margin: auto;
width: 800px;
height: 100px;
}
.top-nav {
background: #fff;
font-size: 14px;
margin-top: 40px;
}
.top-nav a {
color: #000;
text-align: center;
padding: 14px 16px;
font-style: 15px;
/*border-radius: 50%*/
}
/*добавить плавность анимацииы*/
.top-nav a:hover {
border-bottom: 2px solid #000; /*округленный ховер border-bottom: 10px solid #000;*//*как выпуклые кнопки box-shadow: 0 2px 2px 0 black; */
}
.top-nav .icon {
display: none;
}
@media screen and (max-width: 768px) {
.top-nav a:not(:first-child) {
display: none;
}
.top-nav a.icon {
float: right;
margin-top: -17px;
display: block;
color: black;
}
nav {
width: 100%;
height: 100px;
}
}
.top-nav .responsive{
position: relative;
}
.top-nav .responsive a.icon{
position: absolute;
right: 0;
top: 0;
}
.top-nav .responsive a {
display: block;
float: none;
text-align: left;
}
вот HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mirralise</title>
<link rel = "stylesheet" href = "css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src = "js/script.js" ></script>
</head>
<body>
<header>
<div class="logo">
<a href="index.html"><img class = "graficlogo" src="img/logo.png" alt="Logo"></a>
</div>
<nav>
<div class="top-nav" id="myTopnav">
<a href="index.html">HOME</a>
<a href="projects.html">PROJECTS</a>
<a href="blog.html">BLOG</a>
<a href="contact.html">CONTACT</a>
<a href="about.html">ABOUT</a>
<a href="services.html">SERVICES</a>
<a href="location.html">LOCATION</a>
<a id = "menu" onclick = "myFunction()" href="#" class = "icon">☰</a>
</div>
</nav>
</header>
</body>
</html>
сори за объем, я просто не пойму где проблема
помогите пжста