Togggle not working in javascript, i have been trying to find a solution for this problem and nothing seems to work

Question

Code:
https://code.sololearn.com/W3GPSLP1Tcfi/?ref=app
It contains html cas and javascript

Answer 1

Thanks brother It worked for some reason lol

Answer 2

In CSS Instead of .ul1:active use .ul1.active (no space)

: Is pseudo selector

Answer 3

I also tried doing that but it didnt work

Answer 4

Try this code I just switched : with .

<nav class="header">
<label>LOGO <span class="spn">123</span><span class="dot">.</span></label>
<button type="button" id="btn" onclick="myfunction()">
Navbar
</button>
<ul class="ul1">
<li class="hover1">About</li>
<li class="hover2">Services</li>
<li class="hover3">Latest blog</li>
<li class="hover4">Donate</li>
</ul>
</nav>
<style>
@media (min-width: 600px) {
#btn{
display: none;
}
}

@media screen and (max-width: 600px){
#btn{
display: flex;
float: right;
margin: 30px;
}

.ul1{
display: none;
}
}

.ul1.active{
display: flex;
justify-content: center;
justify-items: baseline;
}
</style>

<script>
function myfunction() {
var list=document.querySelector('.ul1');
list.classList.toggle('active');
}
</script>

Answer 5

Gamergoose55
here is my template:
The problem with using ul and li is that you have to remove the bullets and you have the extra ul container. you can use <a>, <button>, <p> or anything else, instead.

https://code.sololearn.com/W6a2mvSCFTGA/?ref=app