How to create navigation bar with search box?

How to create a navigation bar with a search box.
More Videos.
=========================
HTML and CSS Navigation Bar with Search Box : • HTML and CSS Navigatio...
Responsive and transparent navigation menus with social media icons : • Responsive and transpa...
Awesome Overlay Signup Form | HTML, CSS and JavaScript: • Awesome Overlay Signup...
Responsive navbar with search box | HTML and CSS: • Responsive navbar wit...
Navigation Bar with Login Form || HTML and CSS: • Navigation Bar with Lo...
CSS Coffee Cup with Stream || HTML and CSS: • CSS Coffee Cup with St...
CSS Background Animation | HTML and CSS : • CSS Background Animati...
CSS Grid Layout | HTML and CSS : • CSS Grid Layout | HTML...
Full Screen Login Form with HTML and CSS : • Full Screen Login Form...
CSS Smoke Text Animation : • CSS Smoke Text Animation
Awesome Animated Search Box using HTML and CSS : • Awesome Animated Searc...
Cool CSS Border Animation On Hover | HTML and CSS: • Cool CSS Border Anima...
3D social media icons with HTML and CSS : • 3D social media icons ...

[@prk3397]

It's very simple yet it looks so good. You've explained it really well. Thank you for uploading this:))

[@johnjones764]

Yet another excellent job. Nobody does this as good as you

[@rashida4933]

I think it's a valuable video for me. Thank a lot sir....

[@khmerhappy8891]

Thanks teacher for your teaching. I can do as you already.

[@user-Riya1117]

it was soo helpful...it seemed so difficult to me before , your code was really simple and nice..thankyou

[@abdishakur9]

the professor so amazing man thanks bossman

[@Ashboi24]

This was very helpful thanks a lot👍👍👍

[@ZiyaanSekh31]

Sir excellent this is helpful for me
Thank you

[@shruthijavalkar]

Thank you for this video... It helped me... Stay safe...

[@mohamedmouiguina9818]

This is a good tutorial for beginners. I would love to see you work on more advanced web design i myself have some decent tutos on my channel. I would love your feedback.

[@dfjama]

Well done, yes it is simple but amazing..

[@sinistermagus8962]

This is very informative. Nicely done brother. Don't listen to those people who are criticizing you because of the way you speak English. Keep it up. It really does not matter. What matters is the information you are sharing. Nicely done once again! Keep it up! Happy new year! Greetings from Anonymous.

[@jambertaweyah5517]

thanks bro

[@11JSIgor]

Very Good dude!

[@pitambarsahoo7276]

Nice video. Thanks for the post. continue sharing new videos.

[@pitambarsahoo7276]

Please try to improve videos by specifying the meaning of tags.

[@gorantrajkovic2071]

Good tutorial.Thank you.

[@areadev11]

nice video. this is really helpful!!

[@josephkasongo1876]

Thanks a lot!

[@lailajess4972]

Saved. So nice. tnks.

[@Jxbull]

life saver brother

[@elkamerma5402]

thank you very very much...

[@minikashmirivlog7507]

Gud work 💯❤️

[@habbobites3350]

Ei there! Can you make a tutorial for footer thanks! Top fan here sir!

[@IshtiaqUddinOfficial]

Excellent

[@kenmedina9997]

this is reaaly helpful! Thank you so much!

[@wallacematthew8512]

dunno if you guys gives a damn but if you're bored like me atm then you can watch pretty much all of the latest series on InstaFlixxer. I've been binge watching with my gf lately =)

[@luccadustin8081]

@Wallace Matthew yup, I've been watching on instaflixxer for months myself :)

[@abdur-rahmanaroyewun339]

Thank you sooooo much

[@ISMAIL-dl3gw]

great work

[@chayansarkar8722]

Thank you very much!

[@Clip01234]

Good job👍🏻

[@muazmughal2025]

thanx a lot sir

[@rudigonzalez1451]

the auto translator is going crazy with ur accent mate xD ........... nice vid

[@YA-ok1mo]

It brought me spanish (autogenerated)😂😂😂

[@sujanacharya2084]

thanks a lot your video was quite useful..
plz keep making such videos

[@itsisdevabhaiwhatsappstatu2364]

Nice

[@unknowunknow415]

interesting

[@lailajess4972]

tnx. nice tutorial.

[@teoroux9620]

guys who see this in 2020 :
- u're savage bro

[@mdriyad2486]

Thanks

[@danicacanton7367]

Thank you so much Master!! 😍😘

[@3booditechno_537]

vary thanks

[@BonthalaRamesh]

Very nice explain

[@mdmohibulhossain9195]

very good

[@user-jo1nr1my4b]

Good

[@shahindomar3958]

Thanks Sir,

[@zarifabdullah6673]

very nice

[@Igorbiv]

Happiness for you and your family

[@sokdir]

Thank bro

[@webmaster1498]

Welcome

[@saugatsharma5946]

It didnot work for me,even i had copied u r ech and every step

[@GTouch25]

Nice work! I have a question, I downloaded a free HTML scrolling page from online, and had no Navigation bar. I tried to add navigation bar from another existing HTML that I like, but didn’t work the way it should! So is any suggestion on how can be done? As I don’t want to create new one, just want to add it to my new existing webpage! Thank you keep the good work

[@webmaster1498]

Please provide your email I will send to you source code

[@GTouch25]

Thank you ! I did send you my email address

[@lyricsviu6879]

please send navigation bar code to my email
"[e-mail]"

[@atmosphericraven]

If you can do a tutorial on how to make the search box function, that would be nice.

[@adonishomefitness]

Javascript needed

[@saugatsharma5946]

Hey what link should i add on the search bar

[@sathoshreddy]

I understand sir

[@thechef42]

How do i take and make it to be able to search my website ? Is there a piece of code OR how do I take and use it to search my site for content?

[@chamodvishwa436]

hey...! how can help to me.plz.how change text size in created menu

[@hugolapa1229]

hey how would I move the search bar between home and gallary

[@sathoshreddy]

Please do more vedioes

[@aimiyumiko]

Thank you for this video

[@amruthakammu-pq3pt]

I got exact but in dark blue block color came only half of the page and it's middle have so much sky-blue color gap in that and search button there in end page but middle sky-blue is showing wat to do

[@sergioandrescaicedo-ramire4543]

Web Master how can i publish my search engine?

[@nisharawat20]

Sir ye notepad per banate h

[@bcgart.9849]

For coding Here you go
Navigation bar and menus with search box
body{
background: skyblue;
margin: 0;
}
.menu{
width: 100%;
background: #142b47;
overflow: auto;
}
.menu ul{
margin: 0;
padding: 0;
list-style: none;
line-height: 60px;
}
.menu li{
float: left;
}
.menu ul li a{
background: #142b47;
text-decoration: none;
width: 130px;
display: block;
text-align: center;
color: #f2f2f2;
font-size: 18px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.menu li a:hover{
color: #fff;
opacity: 0.5px;
font-size: 19px;
}
.search-form{
margin-top: 15px;
float: right;
margin-right: 100px;
}
input[type=text]{
padding: 7px;
border: none;
font-size: 16px;
font-family: sans-serif;
margin-top: 15px;
}
button{
float: right;
background: orange;
color: white;
border-radius: 0 5px 5px 0;
cursor: pointer;
position: relative;
padding: 7px;
font-family: sans-serif;
border: none;
font-size: 16px;
margin-right: 226px;
margin-top: 15px;
}

Home
Gallary
Event
Feedback
About
Contact
Search

[@viralworld955]

Send me on whatsapp plz 03475149323

[@aze0141]

can u just press f 12 in the website and copy the html?

[@davidecomito9750]

Maybe i watched the video to see how? ;D

[@CatXzerR]

wtf mine is so different with this even I copied yours 1by1

[@AjayKumar-cf4qx]

Can u plzz send me source code for hospital management

[@ishanahmed8288]

it's very lengthy code you could have make even shorter

[@diedonline]

Hi, thank you it worked very well, but how do I highlight the current page I am on? Like for example: I click on the Contact page, and the page button will get a green background or something so I know I am on that particular page. If you could help me with that, thanks!

[@webmaster1498]

You have to create different pages and link to menus than you will get desired page when you click it....

[@maheshmishra3323]

Friend it would go through like it suppose this is menu bar.
a href="Menu.html">Menu
In this case you have to make another html file named Menu and place it in the same folder in which the basic html file is.
Hope this works for you.

[@wbdesigner1064]

not bad

[@ienlanh8749]

😀

[@lailajess4972]

middles section will be. left sidebar plus right sidebar plus footer need. l want you. tnks.

[@ashokkumarlenka174]

U didn't define what is the meaning of those tag
,,,,Only helpful for professional..not for beginners

[@bacon_dinox1858]

i am a professional

[@creativej6339]

How to change search box color and radius

[@clintonweisei100]

the person who disliked this great tutorial is a nerd

[@Wstudent768]

4:44

[@lifeoferic3466]

My search button is not in line with the search bar. How can I fix it ?

[@tr0uge962]

try pulling the plug out and back in

[@Dcode103]

Suppose we click on contact then it should open new page how can we code a for this

[@farheen5578]

if you have already made your contact page for your web then link that file with it .

[@shidosakura5407]

how can i activate sa search

[@noorfatima3522]

i think ap ko code bhi post karna chay bcz code sahi say run nai ho raha

[@carmelamonicbingcang6882]

Can u please just post the whole text. It's too hard to follow please!!!

[@AjayKumar-cf4qx]

Can you provide the code for hospital management software

[@MohiyuddinShaikh]

Life is not that simple bacche

[@dinglaowai7053]

please i need source code

[@minallakhe]

is it responsive?

[@sinistermagus8962]

learn javascript

[@creativej6339]

Sir how to change search box text color

[@iam_chonchol]

Hi, Jyoti Sharma, You can change here
input[type='text'] {
padding: 7px;
border: none;
font-size: 16px;
color: any color you want.
}

[@gwengold1342]

Why doesn't it work when u click on it

[@abhishekmishra7239]

Why you give margin 0 in body section

[@pratikshapuri8254]

My code run but layout not fixed

[@gamicri9310]

All nevigation bar are stick together what should i do

[@kingbajan]

my search bar is not on my nav bar.

[@magdalineamalie3676]

can you pls give me a source code

[@darknite7375]

Wtf Sound.. cant understand.. too noise in background >:(

[@VPBadal]

अगर इसी के उपर एक logo लगाना हो तो कैसे लगाएं

[@sureshbabub9734]

Can share me the code

[@christinevcalingacion1387]

Can you also send me the source code?

[@christinevcalingacion1387]

[e-mail]

[@nikhilmishra1867]

JB bol na nhi Ata English to ku bol rha h bhai nevigtnnn

[@menbex6680]

can I have the source code

[@jacobskals4143]

It didn't work for me. I didn't get the blue bar and the search bar was all weird. Help me plz

[@webmaster1498]

Please proved your email i will send to you source code...........

[@agastyagupta2962]

pls provide source code not working for me

[@praveen0478]

can u please send the code

[@naitikchauhan2953]

my seach bar get collapse please help me

[@webmaster1498]

Please provide your email ..I will send source code

[@danielkautu3409]

unlock your link so we can download please.

[@gamingmood357]

Hello sir

[@kvcs_mark1980]

pls help error=save failed

[@webmaster1498]

If you have problems please provide your email.........I will send source code...thanks