Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialMichael Fazekas
Courses Plus Student 1,256 Pointsnavbar not closing when clicked on fabars
my navabar wont close when I click on menu bars it'll show it but wont close it..
const navbar = document.querySelector('#navbar');
const menuBars = document.querySelector('.fa-bars');
menuBars.addEventListener('click', ()=>{
if(navbar ==='block'){
navbar.style.display='none';
}
else{
navbar.style.display='block';
}
});
<section id="main-section">
<div class="icon-nav">
<i class="fas fa-bars"></i>
</div>
<header id="navbar">
<div class="links">
<a href="index.html">Home</a>
<a href="#about">About Me</a>
<a href="#project">Projects</a>
<a href="#contact">Contacts</a>
</div>
</header>
#main-section{
display:flex;
flex-direction: column;
background-color: #333435;
width: 100%;
height: 95vh;
}
/* icon nav */
.icon-nav{
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 20px;
margin-right: 20px;
}
.fa-bars{
color: #3099b4;
font-size: 28px;
}
.fa-bars:hover{
cursor: pointer;
color: #4f5052;
transition: all .4s ease-in;
}
/* navbar on drop down */
#navbar{
display: none;
flex-direction: column;
height: 40vh;
}
.links{
display: flex;
flex-direction: column;
text-align: center;
font-size: 38px;
}
.links a{
text-decoration: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color:#3099b4;
padding: 5px;
}
.links a:hover{
color: #cee3d9;
transition: all .4s ease-in;
}
1 Answer
Zimri Leijen
11,835 Pointsif(navbar ==='block')
This will never be true.
try if(navbar.style.display ==='block')
Michael Fazekas
Courses Plus Student 1,256 PointsMichael Fazekas
Courses Plus Student 1,256 Pointsof course, what I get for not paying attention to my code.. -.- haha