Clicking on button not working, please help!

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.

Imgur

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";
	}
}

I’d love to help you, but I can’t unless you put your code into something like codepen.
https://codepen.io

Here it is, check the mobile version when you resize the browser
https://codepen.io/bego96/pen/zjMWeZ

Here’s a link to collapsible navbar. Pure css.

1 Like

What do you mean “hamburger button”? I couldn’t find it.