Responsive Dropdown Menu Bar with Search Field using only HTML & CSS

Responsive Dropdown Menu Bar with Search Field using only HTML & CSS

Timestamps:
0:00 Demo of Dropdown
2:45 Creating Navigation Bar (HTML)
3:47 Styling Navigation Bar (CSS)
7:05 Creating Search Bar (HTML)
7:54 Styling Search Bar (CSS)
13:35 Making Navigation Bar Responsive
19:48 Creating Dropdown Menu (HTML)
20:57 Styling Dropdown Menu (CSS)
25:40 Making Dropdown Menu Responsive

Music Credit:
Track: Jordan Schor & Harley Bird - Home [NCS Release]
Music provided by NoCopyrightSounds.

Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)

Track: Lost Sky - Vision [NCS Release]
Music provided by NoCopyrightSounds.

ROY KNOX - Blue Eyed Demon [NCS Release]
Music provided by NoCopyrightSounds.

[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!

[hassenhamrouni]

YOU ARE GENIUS AND INSPIRING . UPLOAD MORE 🙌

[Funnyvideo-qveb]

Without watching the full video like gardeko Broo love ur tutorial

[burgasHoH]

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

[vaishnavia.n.]

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

[vaishnavia.n.]

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?

[axomstudy]

He should have in millions of subscribers

[sanjunimje]

You are so talented bro keep growing..

[quancume]

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

[blackparadox]

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

[jukujak]

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.

[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? :(

[ayansarkar]

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

[kriztmarbaladad]

help, how would i put thenavbar onthe left side?

[camilasalazarfigueroa]

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

[samratghimire]

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.

[komalyaqoob]

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

[rhebisco]

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

[vengalrao]

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

[aikoyuki]

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