всё должно работать
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Творчество для всех</title>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
.responsive {
display: flex;
flex-direction: column;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<a href="index.html"><img class="grafic_logo" src="images/logo.png" alt=""></a>
</div>
<nav>
<div class="topnav" 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" href="#" class="icon">☰</a>
</div>
</nav>
</header>
<script>
menu.onclick = function myFunction(event) {
event.preventDefault();
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else{
x.className = "topnav";
}
}
</script>
</body>
</html>