Responsive Dropdown Menu Bar with Search Field 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

[@asmfunteam7130]

I have an idea for you. Think there is a lot of audio card in a page. If anyone wants to get a specific song he will be able to use the search bar and search between the audios. Plz plz, make a video on it. This is also very rare on youtube. You will get more views also.

[@maximilianokingston7304]

Instablaster.

[@ignrey]

The way you structure the video and put all the time marks in the description, the title, even your website it's good. I'll recommend this channel to any freelancer that has finished their studies and want to get live examples of functionality and programming besides the design. Thanks for the video!

[@CodingNepal]

You comment made my day man. Thank you so much :)

[@hassenhamrouni2147]

YOU ARE GENIUS AND INSPIRING . UPLOAD MORE 🙌

[@CodingNepal]

More to come!

[@Funnyvideo-qv6eb]

Without watching the full video like gardeko Broo love ur tutorial

[@CodingNepal]

Thank you so much 😀

[@burgasHoH]

As a developer I enjoy this video ! Great presentation and skills ! Keep coding !

[@CodingNepal]

Glad you enjoyed it!

[@sanjunimje3703]

You are so talented bro keep growing..

[@CodingNepal]

Thank you bro.. Stay tuned 💙

[@vaishnavia.n.312]

You are awesome man. One fine day I will also code like you.

[@vaishnavia.n.312]

Hello @codingNepal, @time-stamp 13:28, .wrapper #show-search:checked ~ .search-icon i::before{ content:""}, I have given after instead of before, to test the behaviour, the "x" got placed after the magnifying glass, Similarly, when we write before, the "x" should be placed before the magnifying glass, Right? But how is only the "x" being displayed?

[@itzzzyashu]

New subscriber 😁, Keep it up!

[@CodingNepal]

Thanks for subbing!

[@axomstudy]

He should have in millions of subscribers

[@S2GSEXM]

Great videos, good luck! 👏👏

[@CodingNepal]

Thank you 💙

[@quancume]

proud to learn it from a nepali .It helped a lot and was awesome.

[@gabrielcouto4356]

Fanstastic, Thank very much

[@CodingNepal]

Glad you liked it!

[@CreativeTutorialsWeb]

Amazing Sir keep going

[@CodingNepal]

Thank you, I will

[@samratghimire7307]

How can I prevent the moving of Elements when I hover over the Nav bar ? Actually I know that is due to doublr padding ( One on Hover and One on Element itself ) so, How can Make that Rest Elements dont move While I hover.

[@CodingNepal]

I didn't understand.. Can you explain it more?

[@minzcode]

Nice work! It was very helpful.

[@CodingNepal]

Glad it helped!

[@yunusyavuz6147]

Perfect Projects Bro

[@jukujak9268]

can you write code in js to search bar? I have dropdown menu on middle page with product and i need working code to search this product. If i search specific product other must be hiden.

[@vengalrao5772]

25:10 relative means ? How it performs? Anyone ? Answer please

[@camilasalazarfigueroa9330]

Hello, I wanted to ask if I'm using instead of how do I do to change the image of the search-icon?

[@fuckedlaptop364]

first you need an image, second you need to change the i on CSS to img, then you need to place a size if the size ain't good

[@blackparadox8038]

how do I add background image to this website, and how to make search bar work

[@ayansarkar8768]

how can i make search.js file to search and code?

[@yellowduckywithlegs]

hi! the search field is covering my 'x' icon and i also cant seem to get the search field to cover the entire height of the nav bar, someone please help me? :(

[@kriztmarbaladad7191]

help, how would i put thenavbar onthe left side?

[@jomarbolusan2682]

Nice video sir

[@ahmedserag7072]

incredible 😉

[@yutattsang4802]

hello, can you teach me, how to align center ul class "links"?

[@Deus-lo-Vuilt]

Nice , thanks video

[@CodingNepal]

Welcome!

[@ItzRyanL]

can you teach us how to make a responsive working search bar for this dropdown menu bar?

[@komalyaqoob2236]

Excellent 👍but why unicode"\f00d" is not working?

[@buzzz1861]

Hi mate! None of those links are available now. Can u publish the real link of those codes? I really would appreciate that

[@CodingNepal]

Site is already live please go to given link and you'll get codes

[@aikoyuki6953]

No andan los iconos, no se puede seguir el tutorial. Ni siquiera bajando los archivos finales

[@constantine9074]

im a beginner but i understand now that there is a lot of totally unnecessary EXTRA code here... but for learning its cool

[@kaixellx]

search box wont appear when i copy and paste it....

[@CodingNepal]

Please read the pinned comment

[@kaixellx]

@@CodingNepal oh thank you

[@rhebisco1091]

Hello! How can i add a footer into this code? Please. Response

[@hasheemirafsanjani4656]

Sir , may i see a full source code I check it in codingnepalweb.com is not available

[@CodingNepal]

It's now available

[@yashagoxd]

apakah ini akan responsive di hp/Android?

[@ajaydabhi7416]

Bro responshive img slider ki 1 video bando

[@CodingNepal]

Ok bro. You can watch these also: kzbin.info/www/bejne/gnScfZ56jdChbM0 kzbin.info/www/bejne/nJDCqp6KaZyfeLM kzbin.info/www/bejne/j6bRfZmZr6eVobs

[@ajaydabhi7416]

@@CodingNepal ha wo dik pan left and right & automatically slide Chang nhi hoti so veai Vali video bando or responshive ho. Note: imge ki width & hight kitne leni ho vo bhi meanshan Kar na. - thank you.

[@denisfelipe6172]

Hey, I hope you're okay! In first place, I would like to thank you for your videos! And I want to know if you can tell us about your vscode extensions, it would help me a lot.

[@CodingNepal]

It's not VSCode...It's a Atom Text Editor and I used Atom HTML Preview, Pigments, Emmet, Live Server, File Icons.

[@nowara145]

Please do the hangman game

[@CodingNepal]

Sure... I'll make video on it

[@subasbashyal9019]

keep on good work but i m still stuck

[@kisantai618]

where part2

[@salonimourya-s6h]

Where is responsive part bro

[@villagelifeofchilds1126]

writing style of code is not well arranged.

[@nr377]

🌟🌟🌟🌟🌟

[@mariogamilo]

great video but my search box is not coming up.

[@CodingNepal]

Please read the description note

[@nepalimovies7087]

hawa hawa khae ta responsive coding toit