Responsive Animated Navigation Bar With Multi-level Dropdown Using Only HTML & CSS

[@amirnoorani5017]

Wooooow You are awesome! I dug the whole net for the responsive navigation menu. Yours is the best!

[@TrueCoder]

Thank you bro ! I appreciate that

[@maemallari8234]

I have an assignment about creating website and all of your videos are useful. Thank you very much!

[@TrueCoder]

You're welcome :)

[@nahomirioschavez2836]

Great contribution to the community, my friend, already a faithful follower of the channel .... Greetings from Nicaragua

[@TrueCoder]

Thank you :)

[@sairamsunkara595]

Today I, m so happy to see such a talent behind your work

[@TrueCoder]

Thank you bro

[@DuyTran-ss4lu]

The input to toggle hamberger menu is very creative bro

[@manikishorerayavarapu9111]

Best one I've seen about navbar. It's amazing. Keep on rocking bro...

[@TrueCoder]

Thanks Bro !

[@INSPIRATIONALKUMAR]

❤️ From *india (bharta)* 🇮🇳 Thank you for giving such a great or true coder idea 💡 I definitely want to make it

[@priyansh5233]

it's not "bharta", it's "Bharat" 🇮🇳

[@HungNguyen-ss8eo]

Thanks for your video. I really appreciate it. That's what I'm looking for. Keep up the good work! 🔥

[@TrueCoder]

Thank you bro :)

[@Gongodler]

A few animations are a bit too much imo, but apart from that this is the new best Dropdown Tutorial. It could be even better with a bit slower pace (had to set speed to 0.5 and turned off music) and with more explanations, so that I can make the adjustments I want, but aside from that really good tutorial.

[@TrueCoder]

Thanks mate ! Glad it was helpful !

[@harrylee4448]

Astonish tutorial. Thank you for you contribution. Hope you reach sky high subscriber. Subscribed.

[@souravsahawp]

I Love your Channel because you also provide the Source codes thank you so much you are great.

[@TrueCoder]

Thanks bro !!!

[@rsvideos2976]

Awesome custom drop-down menu.

[@juanjohuiza]

The best I've ever seen. Great work.

[@TrueCoder]

Thank you :)

[@furuizhang2078]

You are a true artist!

[@TrueCoder]

Thank you !!

[@AngelBau]

Grandioso!, un menu moderno, bonito, funcional y sin usar javascript. Muchas gracias, te ganaste un suscriptor, sigue haciendo videos de esta calidad y tu canal va a crecer. Saludos desde México.

[@TrueCoder]

Thank you 😊

[@OneOmot]

Impressiv... thank you. Good job!

[@TrueCoder]

thanks :)

[@ashishshukla2229]

totally a masterpiece..... much inspired by your work.... keep it up

[@TrueCoder]

Thank you bro !

[@technicalbot2961]

LOVE FROM INDIA

[@dyszell]

Thanks for the tutorial. It's really helpful.

[@TrueCoder]

Most welcome!

[@asynco]

You're top! I wish you a million subscribers ) Вы топ! Желаю вам миллион подписчиков )

[@TrueCoder]

Thank you !!

[@paulogarcia4371]

THANK YOU VERY MUCH, FRIEND

[@foroughnosrati8627]

such a great tutorial thanks it helped so much

[@misratjannat6900]

thats great! this what i was looking for.

[@TrueCoder]

Thank you

[@akshaysharma9452]

good job sir..............................................💡

[@TrueCoder]

thank you bro !!

[@Cazado20C]

Muchas gracias, excelente trabajo.👌

[@TrueCoder]

de nada

[@fatimahmath4819]

We prefer that you explain and talk instead of music and thank you very much

[@hristomanov2209]

Thank you, it's really nice!

[@TrueCoder]

You're welcome, and thank you too for your kind words !!

[@tekapurnadeem8240]

Brother thanks alot for this 💕💕💕

[@TrueCoder]

Most welcome !

[@imthebeast6163]

Thank you so much !!! Keep up the good work !

[@TrueCoder]

Thank you bro !

[@mdshafiqulislammridul4826]

amazing design.

[@cricketlover7395]

Good creativity nice job

[@TrueCoder]

Thanks a lot

[@jimmelbermudez]

Thank you very much sir you're great

[@TrueCoder]

You're welcome bro !

[@Thanh_Tung2206]

the GOAT 🙌🙌🙌

[@kazuki32_z75]

i really like it sir... but it seems only for intermidiate web developer... some stuff is really alien for now... but i'll learn it sooner... thanks!

[@TrueCoder]

You're welcome

[@emilioj17]

Thanks. Pretty good option.

[@ongpytran4552]

Thank you!!!!!! It's awesome!!!

[@TrueCoder]

Most welcome !!

[@rohiniam4650]

Thank you very much, its so helpful

[@TrueCoder]

You're welcome bro !

[@themetawarse]

it's really great

[@barry-yo6752]

I will have follow it to make profolio .

[@_ranger_hridoy_6213]

Thank you so much

[@TrueCoder]

You're welcome bro !!

[@joanalymaliao4686]

Do you have a full responsive website html,css with javascript?

[@TrueCoder]

Yes, I will make a tutorial about that soon

[@AntonioMartinez-fd7sw]

Excelente Contenido..!

[@pramuditharanganath1646]

nice work

[@javieralvarez5842]

que groso sos!!! muchas gracias!!!

[@romancarlosplasencia7108]

Masterpiece

[@adamkhalil621]

Good BRO♡

[@TrueCoder]

Thank you !!

[@ABC9923XYZ]

God LEVEL

[@Deus-lo-Vuilt]

Genial, buen video

[@saadtoutcourt367]

THANKS!

[@TrueCoder]

You're welcome!

[@sunnygillella3707]

Hey, I was able to create drop down menu using HTML and CSS but the problem is, it is only working when the page is empty. As soon as I add some content to the website, the drop down menu doesn't stay when hovered. can you help?

[@fabiobaziota5919]

Awesome...🔥

[@TrueCoder]

Thank you !!

[@yousseftazit8477]

Thank you a looot ❤

[@TrueCoder]

Most welcome !

[@nickalater]

Awesome!! Once the drop down is clicked in mobile, is there a CSS fix to collapse the clicked menu?

[@romuloalves9349]

Ótimo vídeo parabéns ✌.

[@nelson.costa.dev2536]

Top das galáxias, muito bom.

[@TrueCoder]

Thank you !!

[@e3_prasanjeetsinha85]

@True Coder how to already highlight the link 3(even before we hover over this) of services which contains more link

[@webtutorials5353]

Good job 👍

[@TrueCoder]

Thank you

[@jahidislam7433]

which theme you useing in the vs code?

[@TrueCoder]

Matherial theme

[@jahidislam7433]

@@TrueCoder oky thanks for gived the reply❤️

[@DebaRatna]

keep bringing them

[@TrueCoder]

Thank you bro !!

[@shaileshsony2]

thamks sir/madam

[@markobuljeta4310]

Can I use this code for my website and make some changes of course. I am asking for permission. This fit perfectly for my website. You are awesome and I wish you the best. Just keep going

[@TrueCoder]

Thank you br, yes you can use it

[@syedthamim249]

Great job Bro. keep it up. Can u please upload javascript front end application with animated design

[@salahaljubori8537]

Hello my friend, would you allow me to take the code, change some specifications, and republish it on KZbin platform?

[@manuelmora1311]

Friend is incredible what you do thank you very much I have learned a lot with your videos .... can you tell me what version you use from the visual studio? or what program are you using please

[@TrueCoder]

Thank you bro !! I am using the last version of visual studio code

[@rekan_98]

thank u

[@AngelaRoquet]

This is fantastic! Thank you so much! I am running into one odd issue. I have some longer menu titles that I'd like to keep on a single line, but if I increase the dropdown width from 10rem to 16rem, the hamburger menu does not align correctly when I test it in various mobile views. Sometimes it is cut off, and sometimes it disappears altogether. Any idea how to make it behave without having to set the dropdown width back to 10rem?

[@TrueCoder]

try to give "nav-btn" element a flex of 4

[@AngelaRoquet]

@@TrueCoder That worked perfectly! Thank you! : D

[@TrueCoder]

@@AngelaRoquet You're welcome !!

[@AngelaRoquet]

@@TrueCoder I spoke too soon... once I refreshed my browser, the error reappeared. : / It's not the menu itself but rather the 3-line hamburger icon that is being cut off or disappearing, depending on the media screen size. Very odd.

[@TrueCoder]

@@AngelaRoquet remove width: 16rem

[@chocochoco1412]

what apps do you use for writing the code? And thank you for your hard work

[@TrueCoder]

vs code

[@Jack-lz8dt]

hi can you show how to collapse the submenu when the parent menu click once the submenu is shown

[@texxs01]

Looks great, works great but . . . when i use this in any way the page it's on won't scroll down. The "page down" key or even arrow keys won't work either. I made a real simple example but of course, can't post links here. Ideas?

[@ronaldperera8240]

Buscando bronce encontré oro! muchas gracias por el tutorial, de verdad muy bueno te felciito. Podría agregar iconos a los submenus también cierto? y si este lo quisiera de izquierda a derecha ya que el que muestra abre de derecha a izquierda...

[@bhargavnakkina2568]

which theme are you using

[@amivlogger9093]

Sir ji ...the bran logo or name...i want to get it in left corner how can i do that....its not moving

[@stephenv9957]

Hiii sir,I am new to css can we apply background color to the empty div without mentioning height in css

[@NedumEze]

Thanks Bro. But, please may I ask what the inline styles: --i: 0.6s;, mean?

[@TrueCoder]

we just put the delay of each element in variable "i"

[@riponroy116]

Please make the same features with bootstrap

[@TrueCoder]

ok, i'll try

[@olivercavallo7020]

Does anybody know, why when Iam in mobile version and I click on the arrows It just realods the page and close the menu? Wheres the problem?

[@punayjulius3192]

Thank you very much for sharing to us this cool work! I really appreciate it. can we use this code and make changes? but before I do this I'm asking for your permission thank you ^_^

[@TrueCoder]

yes you can

[@KacperMarciniak_]

Color and cube change ,when ":hover" :) .btn { padding-bottom: 1rem; padding-top: 1rem; padding-left: 1rem; padding-right: 1rem; position: absolute; display: inline-block; font-size: .8rem; border: 2px solid #fff; border-radius: 2rem; line-height: 1; margin: -0.5rem; transition: .3s; text-transform: uppercase; } .btn.solid, .btn.transparent:hover{ border-radius: 2rem; position: absolute; background-color: #fff; color: #69bde7; } .btn.transparent, .btn.solid:hover{ border-radius: 2px; color: crimson; position: absolute; background-color: transparent; }

[@thomaspries2208]

Thank you for this great work! I have tried to make changes (delete the div with the sign in buttons and set the other buttons to flex-end. Now the toggle is out of screen on mobile devices... What I am doing wrong???

[@sofianaaz2609]

When i added my logo in place of brand-name then the logo is sticking on the top left Please reply

[@thearticlehindi]

Please make footer for this navbar and edit the image and overlay.

[@christopherjohnchapman]

If we make a donation are we free to attribute and use in our own sites?

[@TrueCoder]

yes, of course

[@christopherjohnchapman]

@@TrueCoder I am watching this on my phone now away from my laptop. I saw a dot js file referenced in the video. Does this navigation menu require Javascript or does the Javascript just add elegance?

[@TrueCoder]

@@christopherjohnchapman No Ididn't use javascript in the video, what you saw was the font awesome cdn

[@nomadaxable]

Hi, first of all I really like your vids... Im really new to web dev and in the process of learning i tried to add a footer to this code right after the closing main tag but i cant get it to display properly, at first it didnt display at all and it has something to do with the CSS code: height: calc(100vh - 3rem); that belongs to the section in the main. Then by changing these values im able to see the footer but i would like to know how to add a footer that would be part of the whole layout without having to go inside this calc method and setting up values until it looks the way i want it. Thanks in advance.

[@andrewgarfinkel1978]

anyone else getting side scrolling on the body on mobile? After translateX on the .nav-btn, I am getting side scrolling. Even tho the position is absolute

[@balajicomputerandemitracen6430]

like it

[@kalahari8295]

Can't toggle on and off visibility of menu

[@KacperMarciniak_]

Hi. I got problem with buttons. I don't know why I can't click them :/ Fixed: Buttons position: position: absolute;

[@TrueCoder]

make sure you give him z-index

[@KacperMarciniak_]

@@TrueCoder z-index: 100000000; And working :D

[@artramgesta]

Thanks True Coder, awesome code, functional and good looking interface. Excuse me, do you know why multi-level dropdown and background-color in overlay div doesn´t work in Chrome 49.0.2623.112 (64-bit). All Responsive Animated Navigation Bar doesn't work on Safari (iOS 12.4.8) either. Is there any way to make it work on those browser´s versions?.

[@Rangabhari]

can i use this code in website

[@s0urp0wer5]

What's the song do it was bangin!

[@anthonyfortunes5136]

Thank you 🙂 for this Pls wats d name of the background music

[@bioniject]

Background music?

[@ehryckiellaguatan5605]

hellyeah

[@ananyabr4448]

Bro is this sticky navbar!?

[@Ever4u]

robot is doing designing

[@DennisRLing]

I'm going through the code for the second time, but I still have the same issue. when I review the page the dropdowns show... I'm using Video studio code, and this time I am making the code as I follow along on your tutorial... still same problem. I know I must be missing something, but for the life of me...

[@TrueCoder]

check if you hide the dropdowns in css

[@syediqbalahmed3176]

see later ...

[@nabilsn411]

watch it at 0.5 speed

[@hollengrhen1]

Too many divs, and the site navigation bar becomes untappable..

[@bharathkbpr3043]

Position , top, left, transform :initial what is the default values for these