Responsive Mega Menu and Dropdown Menu using only HTML & CSS

[@CodingNepal]

Nowadays font awesome CDN link/script that I provided not support so your icons may not be showing. Just replace that line no.8 script tag with this

[@meditationrelaxvibes3321]

Many thanks bro for these tutorials . If you could add a responsive search bar to this mega menu . I love your videos and I'm learning a Lot . Keep up

[@JeanRomanRoaming]

the above Pinned link is "invalid file type". The "hamburger" icon does not show up when screen size is reduced. How can I solve this issue? It's a big problem. Also it would be helpful to provide a guide link to code to: how do I insert a Logo image (100px max)- instead of just type for logo. and where do you place main content of page because your code is all in the "" instead of in a . I don't understand. Please help me!

[@hassenhamrouni2147]

Many thanks for your time to go through my request . I love what i'm seeing and i'm learning a lot from you . Your are AWESOME AT WHAT YOU DO..

[@CodingNepal]

Thank you so much 😍

[@idesignconcept9128]

wow...just wow. You so simplified what I had known before. Now I learnt a simpler way, and with cleaner and shorter codes. I am subscribing right away. Where have you been all this while? OMG!

[@jaimemcqueen4367]

Thank you so much for this! I had been looking everywhere for an ideal menu for my site redesign, this video was super helpful :D you are awesome!

[@danielgastonvalenzuela1009]

Muchas gracias por tus aportes a la comunidad. Saludos desde Argentina!!!!!!!!! Thank you very much for your contributions to the community. Greetings from Argentina

[@CodingNepal]

You're welcome 💙

[@meshackkiprotich1050]

Thanks alot for this man! May God bless you. And by the way the music is incredible, I totally relate to it in my current life situation (relationship with coding). Thanks for your time and dedication to help out.

[@rezvanibeastx3452]

Wow nice. I want part 2 of mega menu. Thank you so much.

[@CodingNepal]

Sure.. It'll come day after tomorrow.. Stay tuned 😁

[@zayan8165]

Sir G highly appreciated i am also a webdesigner i am on training from centre APTECH

[@josejohnhalindogo8336]

This is incredible! Nice work buddy!

[@CodingNepal]

Thank you 💙

[@plugodigital]

Incrível, este é o melhor navbar para qualquer tipo de site, não consegui acreditar! Parabéns. muito obrigado pelo seu tempo e esforço.

[@FIFAGOALS_2022]

I have been watching others country videos bt here is far better than them❣️🇳🇵

[@CodingNepal]

Thank you so much and don't forget to visit channel for more awesome videos

[@whatever3152]

9:00 how did you make it? copy and paste all of them like that. I search and read a lot of document on google but still dont know how to do it :(. Can you help me

[@anonymousgladiator5541]

Hi there, I see you make really good videos! Perhaps could you make one on a shopping cart with local storage (with source code)? It's very hard to find any good tutorials on that. Could you help me out please? I would really appreciate it! Nice tutorial by the way! 😁

[@scargammar3079]

Thank you so much for your great support.👏

[@CodingNepal]

Always welcome

[@youssradebbali7726]

Nice work 🤩🤗⚘👏👏💐 ( my favorite channel ) thank uu💞

[@CodingNepal]

Thank you so much 😀

[@denhamk]

how did you get the menu to stay while you hovered through the menu items? When I hover over my links the menu appears but it disappears when I try to select a menu item 😭

[@rennieraka8314]

Hi, how do you increase the height and width of the megamenu content to accomodate many columns and list?

[@mayaonlineshopping6941]

Thank you so much for this, Responsive Mega Menu and Dropdown Menu using only HTML & CSS create successful and under next step video please thanks,

[@amircahyadi9219]

Perfect... your creation always go burn

[@CodingNepal]

Thank you 😍

[@denisfelipe6172]

Hey, I din't undestand what the css code below is doing: .content .row:nth-child(1), .content .row:nth-child(2){ border-left: 0px; } Could you help me undestand that?

[@CodingNepal]

:nth-child() is a selector and the above-mentioned codes mean select the first and second child of the .content which has .row class name and style the left border of these childs to 0px; Why did I do this? Because there are many childs of .content(parent) which has .row class name and we have to style the left border of the first and second child only so I did this. We can also style the first and second child only by giving other class names except .row

[@ABC-el3ql]

@@CodingNepal Is the result the same whether you comment on this part or not?

[@gypsysoultraveller]

Your work is really awesome...God bless you...and my wish is that you earn a lot for your efforts...may I know where are you exactly located?

[@eeuqon]

Many thanks, really nice work. Is it possible to activate the drop down menus when clicked the button instead of on hover?

[@romuloalves9349]

Ótimo vídeo parabéns 👏.

[@binkositideslors1491]

thanks for course but i have got a question for you, how to make a slide menubar in responsive like for amazone without a burger thanks

[@upendrachaudhari4635]

The code is very clean and compact...brilliant :)

[@CodingNepal]

Glad you like it!

[@adrianmontilla3095]

Awsome 😍 and beautyfull 😍

[@CodingNepal]

Thank you 💙

[@shoaibakhtar2831]

8:50

[@dadvalker5935]

when I create 2-3 mega menu with your code, It's working on desktop but in mobile working first menu only not other how can I solve?

[@CodingNepal]

You may did mistakes in media query breakpoints. Please check again

[@dadvalker5935]

@@CodingNepal I know the problem in media query but don't understand what is it? I use same code which you use but don't understand where is the problem. please help me, can you make two mega menu with your code so I can understand

[@chome4]

Fantastic menu. How could you get the mega menu to stay in place when you move the mouse away?

[@binayrajbanshi7849]

YOO ever heard of javascript

[@yubiroaster6285]

Awesome 😊 bro.....keep it up 😁

[@CodingNepal]

Thank you bro.. Stay tuned 😁

[@ABC-el3ql]

Awesome! Thank you! Thank you! Thank you! And thank you very very very much!!

[@CodingNepal]

You're very welcome!

[@asankasudesh900]

hi thank u ur guide, when i add bottom layer ,dropdown item not vissible please help me

[@bilalsaeed6068]

Man You Awesome 👌❤

[@CodingNepal]

Thank you 😍

[@bilalsaeed6068]

@@CodingNepal You Always Welcome ❤

[@MrAbbo11]

Thank you! You're wonderful :)

[@kevalvekariya2640]

Wonderful thanks bro

[@CodingNepal]

You're welcome bro

[@anasstaoufik6250]

what application you use please?

[@CodingNepal]

I have used Atom Text Editor and here is the video of it - kzbin.info/www/bejne/a2a5m4uKmr6eiqc

[@ramssey249]

Can you make playlist for wordpress themes design?

[@CodingNepal]

I'll think about it

[@rurallife764]

Thank you so much brother.

[@Mahnoor_Shahzadi]

hahaha i made it change images on hover over the text, all nav items separate from one another have their own default images also 😍😉😉😋😋

[@bl7937]

This tutorial showed a responsive navigation. However, it’s not in this video… wasted time watching it.

[@vinhvo4816]

Thanks for you video. Effective

[@Gongodler]

How to make it really responsive, so you can navigate on the Smartphone (Hamburger Menu or similar)?

[@Gongodler]

Oh I see, there is a second part. Sorry. Good work, one or maybe the best HTML & CSS responsive Dropdown Menu video I found so far

[@SURAJRSRA]

Bro in any one video show your face with your name😅😁

[@CodingNepal]

Sure... Stay tuned

[@rajeshweb7594]

bro can u help me on React JS

[@upendrathakuri5843]

Nepali? Wow!

[@thanhphatleang943]

thank you teacher!

[@CodingNepal]

You are welcome!

[@RaviKant-ey8yp]

Bro, I wanna learn CSS, from where should I learn? please tell me

[@CodingNepal]

You can google it and there are many websites who provide free pdf files as well videos of css.

[@RaviKant-ey8yp]

@@CodingNepal Brother, I don't know a proper path to learn css that's why I asked you :(

[@franciscoolivares1474]

Thank you! Mega awesome

[@jaypanchal5698]

great work !!

[@CodingNepal]

Thank you 💙

[@umarfiaz5034]

what is the purpose of using this below code? .content .row:nth-child(1), .content .row:nth-child(2){ border-left: 0px; }

[@ЕленаБорискина-п8ю]

CodingNepal 7 месяцев назад :nth-child() is a selector and the above-mentioned codes mean select the first and second child of the .content which has .row class name and style the left border of these childs to 0px; Why did I do this? Because there are many childs of .content(parent) which has .row class name and we have to style the left border of the first and second child only so I did this. We can also style the first and second child only by giving other class names except .row

[@RaviKant-ey8yp]

Brother, why didn't you put this video in any of your playlist?

[@CodingNepal]

I'll put it later.. Thank you checking our playlist videos.. Stay tuned 😁

[@RaviKant-ey8yp]

@@CodingNepal Bother, I always use playlist for getting videos seperately, its very helpful, please always add videos to their respective playlist, Its really very helpful man

[@CodingNepal]

Sure.. Brother.

[@Tarun-uj4vq]

Hello sir How to create ecommerce website in responsive fully step by step in multiple page this please sir video upload Here

[@CodingNepal]

I'll make video soon. Stay tuned

[@MohammadAsif-td3li]

Great work.

[@CodingNepal]

Thank you.. Stay tuned 😁

[@lusanto9]

👏👏👏 thanks!!!

[@CodingNepal]

You're welcome 💙

[@kanchonkumarsheel6553]

Thank you so much

[@CodingNepal]

You're welcome 💙

[@beautycosmatic4189]

Mara program execute ni karta program ko. Plz help mee.

[@malexv]

Nice menu. How to make two dropdowns showDrop? duplicate Dropdown Menu

[@fetdi]

Thank's it's very nice

[@CodingNepal]

You're welcome

[@freelancingpro5788]

totally mind blowing

[@gyanganga8441]

for mobile view?

[@mucahitkayatuzu5907]

Fantastic!

[@luantran7118]

Can You up file git ?

[@abhigyan2981]

Great video

[@CodingNepal]

Thank you 💙

[@nian360]

Love from Bangladesh....................................................*/

[@CodingNepal]

Keep loving 😃

[@tanveerhussain3881]

great job

[@CodingNepal]

Thank you.. Stay tuned 😁

[@saranyab.s2496]

toggle is not working

[@diroo6148]

You are best!!

[@CodingNepal]

Thank you 😁

[@PreparingGeneeskunde]

Update: downloading your source code from (www.codingnepalweb.com/p/download-timer-responsive-mega-menu.html) will work, but copied your html and css files from here didn;t work: www.codingnepalweb.com/2020/10/responsive-mega-menu-and-dropdown-menu.html Original comment: Dear codingnepal, I copied your code from your website but it's not working. I tried it in my vscode ide, it doesn't work.

[@CodingNepal]

Yes codes may not work when you copy and paste because I got multiple errors while posting blog post so I've commented some lines of codes.. Just download files instead of copying codes or if you know basic html css then just uncomment the commented lines.

[@luantran7118]

thank you very much

[@menhactrung782]

How to copy and paste like that. He only copied right once and pasted really fast. Teach me pls !

[@CodingNepal]

Please, mention the timestamp so, I can tell you.

[@menhactrung782]

@@CodingNepal 9:00 and 9:20

[@CodingNepal]

For multiple select: Press ctrl and click in every place you want. For duplicate code: Select codes you want to duplicate then press ctrl+shift+d to duplicate it.

[@menhactrung782]

@@CodingNepal Thanks u so much

[@CodingNepal]

Remember, these shortcuts are only work on Atom Text Editor. Other code editors have their own shortcuts.

[@mytube5182]

Keep going brooo

[@stanleyjaxen5043]

thanks i appreciate this one

[@shayariwithrizvi]

Nice

[@Tarun-uj4vq]

So beautify looking

[@v.karthickraj7598]

For mobile and Tab

[@jugalsharma6114]

Nice bhai

[@CodingNepal]

Thank you bhai.. Stay tuned 😁

[@abhinavawasthi728]

@@CodingNepal bro why are u laughing everywhere..?

[@CodingNepal]

Because I'm happy while reading viewers comments :)

[@abhinavawasthi728]

@@CodingNepal you make us happy by making such type of videos. .keep it up

[@CodingNepal]

Thank you so much 😍

[@alexandrecarriere2849]

Cant beleve It, I must be dreaming!!!!

[@CodingNepal]

Glad to hear that 😁

[@oscarbrd6129]

You have a virus in the .css

[@nuralamsiddique8145]

nice

[@giuliosantos7206]

perfeito ... muito bom!

[@akobey]

Perfect.

[@CodingNepal]

Thank you.. Stay tuned 😁

[@dady7396]

if you speak we can understand more.

[@CodingNepal]

I'll do in my upcoming videos

[@ramanampisonjerryandersen8162]

coool