Responsive Navigation Bar with HTML CSS and Javascript | Responsive Menu

Enroll My Course : Next Level CSS Animation and Hover Effects

Another Course : Build Complete Real World Responsive Websites from Scratch
------------------
Join Our Channel Membership And Get Source Code Everyday
------------------
Please LIKE our Facebook page for daily updates...
------------------
Responsive Dropdown Navigation Bar with HTML and CSS

[OnlineTutorialsYT]

please like and share this video...
and also SUBSCRIBE my channel for daily new video...and don't forget to press the bell icon for daily notification

[OnlineTutorialsYT]

Also Watch
Responsive Navigation Bar With Logo

Responsive Dropdown Menu

[wolfmountaingames]

For those of you who could not get the click to dropdown to work:
Make sure you included <div class="menu"> before the <i class="fa fa-bars" aria-hidden="true">.

[amguruprasath]

Use this instead of Jquery
<script>
let menu =
menu.addEventListener('click', (e) => {

})
</script>

[shahnazmandal]

thanks a lot sir. I can't believe you help me this way. really thank you so much. No youtuber help me like this. this video totally solve my problem.

[Bigmommajill]

Thank you - this is the best way to learn responsive bar menu I have seen! Thanks a million!

[babyprintz]

This was a great tutorial! Straight-forward, easy to follow steps. Thank you. P.S. The music was soothing too, thanks for that.

[kaissoune]

I couldn't believe it, as pretty as amazing work, All praise is due to God, I just give thanks to God, "you do the first tasks of my work" Be grateful for your thoughtfulness! God willed it! I have a lot of homework this one is the number one to do it! before thinking about how could I do it, I have happily played with mom and I made her happy and I told her, now I'm gonna work on many projects, she told me, with a smile, son "God knows " when I checked my phone this first video shown of my screen! I just give thanks to God!
May God Grant it to this team!
😊 😊 😊😊

[marcinn]

Great thx man! I tried all day to do it without result, but with you tutorial i did it in 30 min! lov u <3

[bridgetshidok]

I loved this. Been searching for a video like and was really easy to understand 👍🏾

[rahmanitaaulia]

This is what i've been searching for, thank you, it was helpful❤

[emmamckellar]

Ahh this was amazing and did exactly what I needed. Thank you!

[yOkay_]

with that music... everything stays relaxing for work

[anuragkasudhan]

thanks a lot sir. it really helped me a lot to learn this new concept of media query and css. thanks a lot. it was so much helpful

[mirmil]

Great tutorial!
Thank you!
Music was excellent too!

[I_dont_want_an_id]

For thos who's OWN INTERPERTATION on this navbar didnt work. I went through the pain.

Here's what to do:
1. Delete that jquery thing, and delete the css class ".active"


2. on the div surrounding your navicon or svg add this: onclick="hideAndShow()" (mine looks like this: <div class="hamburger-menu" onclick="hideAndShow()"> )


3. add an id to the ul-tag (, mines called: id="ul")


4. and in javascript you should copy this if-statement. and replace the ('ul') with your id name


heres what your code should look like:
<script>
function hideAndShow() {
var x =
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>


srsly, shouldnt have got to know this without God's (Jesus' fathers) help :'""D!

[malikkingxd]

Wow yaar Supperb sir its Really amazing video

[Grewal]

best video of your coming....upload "footer with social networking icons".

[lucberger]

Thanks for the tutorial! Works perfectly.

[anudeeproy]

Excellent, short and upto the point. Thank you so much