How to create navigation bar with search box?

Показать описание

How to create a navigation bar with a search box.

More Videos.
=========================

Web Master

Рекомендации по теме

Комментарии

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

prk

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

Riya

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

pitambarsahoo

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

shruthijavalkar

For coding Here you go

<!DOCTYPE html>
<html>
<head>
<title>Navigation bar and menus with search box</title>
</head>
<style type="text/css">
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;

}

</style>
<body>
<nav class="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Gallary</a></li>
<li><a href="">Event</a></li>
<li><a href="">Feedback</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>

</ul>
<form>
<input type="text" placeholder="Search">
<button>Search</button>
</form>

</nav>

</body>
</html>

bcgart.

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

johnjones

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

rudigonzalez

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

khmerhappy

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.

mohamedmouiguina

Sir excellent this is helpful for me
Thank you

ZiyaanSekh

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

chamodvishwa

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

GTouch

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

rashida

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?

thechef

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

atmosphericraven

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.

sinistermagus

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!

diedonline

Well done, yes it is simple but amazing..

dfjama

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

habbobites

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

saugatsharma

How to create navigation bar with search box?

How to create a CSS navigation bar in 6 minutes! 🧭

How to Create A Navigation Bar using HTML and CSS | Coding Ninja

How to Create Navbar in HTML and CSS

How to create a Responsive Navigation Bar (for beginners)

Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox

How to Create Responsive Navigation Bar using HTML and CSS

Simple Navbar With Flexbox | Navbar CSS Tutorial

Animated Responsive Navbar with CSS - Plus Other Useful Tricks

How to Create Responsive Navigation Bar using HTML and CSS

How to Create Responsive Navbar using HTML & CSS

CSS Tutorial: Creating a Navigation Menu | Web Development Tutorials #23

The Right Way To Build A Navigation Bar In Figma!

Creating A Stunning Navigation Bar In Figma Step-By-Step Tutorial 2023

How to create an awesome navigation bar with HTML & CSS

Sticky Navigation Bar On Scroll Using Vanilla Javascript | Fixed Navbar on Scroll

How to create Navigation bar in Figma using Variants | Speed Art Tutorial | Figma | UI Design

How To Make Responsive Navigation Bar Using Only HTML and CSS | Responsive Navbar Tutorial

How to Create a Navigation Bar in 6 Minutes | HTML and CSS Tutorial For Beginners

How To Make Navigation Bar In HTML And CSS | Navbar HTML CSS Tutorial

Navbar CSS Tutorial | Create a Navigation Bar With Flexbox

Animated Navigation Menu Bar using HTML CSS | Menu Hover Animation

Create Navigation Bar like w3Schools | CNB | HTML & CSS PROJECTS

CSS Tutorial: Creating a Navigation Menu | Web Development Tutorials

HTML Navigation Bar Tutorial | HTML Navbar | How To Create Navigation Bar In HTML | Simplilearn