Im trying on mobile device to hide navigation while hamburger button is visible, and when i click on hamburger button i want navigation bar to display bellow in column with display flex while hamburger button turns into X and vice versa. Problem is i tried couple of different ways to make this code work but it just wont.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ismar Begić</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header id="header">
<div id="header-inner">
<div id="profile">
<a href=""><img src="Images/profile.jpg" alt="profile image"></a>
</div>
<div id="info">
<h1>Hello im Ismar <br> and welcome to my portfolio</h1>
</div>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<nav id="nav">
<ul id="navigation" class="flex">
<li class="list"><a href="">About</a></li>
<li class="list"><a href="">Portfolio</a></li>
<li class="list"><a href="">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<section id="about">
<p>Zdravo, ja sam Ismar Begić, pohađam IT Akademiju i bavim se Web Dizajnom. Rođen sam u Tuzli 19. Februara 1996. godine. Završio sam srednju Građevinsku školu 2015. godine i krenuo na Građevinski fakultet u Tuzli ali sam ga napustio 2017. godine. Poslje sam se odlučio isprobati u IT svijetu, čuo sam za IT Akademiju koju sam upisao 2018. godine, išao sam na Web Dizajn i jako mi se svidjelo, dosta sam toga naučio. Volim raditi u Adobe programima kao što su Photoshop, Illustrator, Dreamweaver te pisanje koda u HTML i CSS.</p>
</section>
<section id="photoshop">
</section>
<section id="illustrator">
<h2>Adobe Illustrator works</h2>
<div id="work1">
<div id="work1-image">
<img src="Images/Illustrator/revi.jpg" alt="Revi Illustrator work">
</div>
<p>REVI logo dizajn za web stranicu koju sam uradio za zadatak iz HTML i CSS-a. Prvo sam u Illustratoru odradio nekoliko ovakvih različitih logotipa pa sam na kraju izabrao ovaj logo koji mi se najviše svidjeo od svih ostalih.</p>
</div>
</section>
<section id="animate">
</section>
<section id="dreamweaver">
<h2>Adobe Dreamweaver works</h2>
<div id="dreamweaver-work1">
<div id="dreamweaver-work1-image">
<img src="Images/Dreamweaver/bootstrap-site.jpg" alt="Dreamweaver bootstrap site">
</div>
<p>VjeĹľba u Dreamweaveru, osnove layouta u Bootstrapu.</p>
</div>
</section>
<section id="html">
</section>
<section id="javascript">
</section>
<section id="contact">
</section>
</main>
<footer id="footer">
</footer>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
vertical-align: bottom;
}
#header {
padding: 20px;
background-color: #60C8D9;
}
#header > #header-inner {
display: flex;
flex-direction: column;
align-items: center;
}
#header > #header-inner > #profile {
width: 200px;
}
#header > #header-inner > #profile > a > img {
border-radius: 50%;
}
#info {
text-align: center;
color: white;
}
#nav {
display: none;
}
ul {
display: flex;
flex-direction: column;
align-items: center;
}
ul > li {
padding: 0;
margin: 0;
}
ul > li > a {
display: block;
padding: 15px 20px;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
#main {
padding: 10px;
}
#illustrator > h2 {
text-align: center;
}
#illustrator > #work1 {
display: flex;
flex-direction: column;
align-items: center;
}
#illustrator > #work1 > #work1-image {
width: 200px;
}
#dreamweaver > h2 {
text-align: center;
}
#dreamweaver > #dreamweaver-work1 {
display: flex;
flex-direction: column;
align-items: center;
}
#dreamweaver > #dreamweaver-work1 > #dreamweaver-work1-image {
width: 200px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
#header {
padding-bottom: 0;
}
#header > #header-inner {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
}
#header > #header-inner > .container {
display: none;
}
#illustrator > #work1 {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#illustrator > #work1 > #work1-image {
width: 1000px;
margin-right: 10px;
}
#dreamweaver > #dreamweaver-work1 {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#dreamweaver > #dreamweaver-work1 > #dreamweaver-work1-image {
width: 320px;
margin-right: 20px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
nav {
display: flex;
flex-direction: row;
justify-content: center;
}
#header {
padding-bottom: 0;
}
#header > #header-inner {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
}
#header > #header-inner > .container {
display: none;
}
#illustrator > #work1 {
display: flex;
flex-direction: row;
}
#illustrator > #work1 > #work1-image {
width: 1000px;
}
#dreamweaver > #dreamweaver-work1 {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#dreamweaver > #dreamweaver-work1 > #dreamweaver-work1-image {
width: 400px;
margin-right: 20px;
}
}
@media screen and (min-width: 1280px) {
#header {
padding-bottom: 0;
}
#header > #header-inner {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
}
#header > #header-inner > .container {
display: none;
}
#illustrator > #work1 {
display: flex;
flex-direction: row;
}
#illustrator > #work1 > #work1-image {
width: 1000px;
}
#dreamweaver > #dreamweaver-work1 {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#dreamweaver > #dreamweaver-work1 > #dreamweaver-work1-image {
width: 400px;
margin-right: 20px;
}
}
JavaScript:
function myFunction(x) {
var y = document.getElementById("nav");
//x.classList.toggle("change");
if (y.style.display === "none") {
x.classList.add("change");
y.style.display = "block";
} else {
x.classList.remove("change");
y.style.display === "none";
}
}