Responsive Navbar with Search Box in HTML CSS & JS

Hello Friends, Today in this post, we’ll learn how to create a Responsive Navbar with Search Box in HTML CSS & JavaScript. recently I have shared an Animated Search bar using HTML and CSS, but our today’s topic is responsive Navbar with Search Box.


As you all know a navigation is a user interface element within a web-page that contains links to other parts of our website. A website navbar is most usually displayed as a horizontal list of links at the top of each page.

 

Today in this article, I’ll share with you this amazing navbar example. This navbar is totally responsive to any device. On mobile devices, this navbar will adjust their size according to the device height-width. I used CSS Flex and @media property to make this Navbar Fully Responsive.

 

The search box of this navbar is to create only for design purposes so, when you entered any info in the search bar and click the search button, it won’t show you any results. You may see many websites that have a search box inside the navbar. it provides the best user experience while browsing and searching site content.

 

If you are a beginner in the designing field you may have tried to build such a navbar. Didn’t get the best result? don’t worry! In this article, you’ll know the basic concept to create a responsive navbar with a search box. this is a pure CSS based navbar project that comes with a search box, dropdown, and hamburger image icon.

 

The menu items are handled in HTML unordered lists and dropdown are based on nested lists. As you can see in the video, this Navbar is fully Responsive for any devices. If you’re a beginner in Web Designing then this article will help you to understand the basic codes and concepts behind creating the Responsive Navigation and their Search Box.

 

I hope it will help you a lot, and if you want to get source codes. You can easily get the source codes of this article. To get the source codes you just need to move scroll down. You can use this code on your projects and websites. If you know JavaScript perfectly then you can easily make this search box workable by adding some JS codes.

Play Video

Before giving the codes of this article lets a few talk about the main tags and codes of this program. At first, In the HTML File, I created <nav> tag. As you know, the <nav> tag highly used to create Navbar. Then I created a with the class name “.logo”.After that, I created another with the class name “nav-items” and placed five tags inside it. Inside each tag, I created an anchor tag.

 

Inside the href attribute of tag, I’ve written # that means when you click on the nav items it won’t redirect you to any page. If you want to redirect your user to a particular page then you can put the URL of the page inside the href. At last, I created <form> and placed <input> tag and <button> tag. Inside <button> I’ve written the class name of the font-awesome search icon name to show Search Icon.


In the CSS File, first I gave a background-color to the navbar then using flex property I placed all elements horizontally. Then I did basic styling to logo and nav-items like I gave color, font-size, padding, etc. Similarly, after that, I did styling to the search box and search icon. Then I again created some tags in HTML File for icons (cancel, menu, search) and hide these icons with giving display: none.

 

Now, to make this responsive I used CSS @media property. Using this property I’ve changed the elements height-width, margin-padding, size, etc. at particular width. On mobile devices, I moved the logo at the center and placed all nav-items vertically and changed the position of Search Box, and did basic styling to it. In JavaScript, I just created a three-click function for Cancel, Menu, and Search Button. Then I changed the CSS values of the Navigation and Search box on the particular button clicked.

 

To create this article. First, you need to create two Files one HTML File and another one is CSS File and another JS file. After creating these files just paste these following codes into your file. For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

 

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it

HTML

loading-image

CSS

loading-image

11 thoughts on “Responsive Navbar with Search Box in HTML CSS & JS

  1. Very nice navbar.I liked it so much.

    Can you please make us also a working searchbox on a navbar.

    Thankyou for making such beautiful navbar.

    Thankyou so,much.

  2. TY for blogging this, it had been quite handy and helped a ton Great theme, did you make it on your own? Looks superb! Facinating post to check on this awesome blog. Never write any replies but now i just did not resist ..

  3. I have created a blog using Blogspot, and I want it to appear on Google Search. Can someone provide me with the steps to do so? . . Much appreciated!.

  4. Hi there from Texas! I’m bored at work so I decided to check out your site on my free time during lunch break. I love the info you provide here. Anyhow, wonderful post!

  5. Youre so cool! I dont suppose Ive read anything in this way just before. So nice to get somebody by original thoughts on this subject. realy appreciation for beginning this up. this website is one thing that is needed online, someone after some originality. helpful project for bringing new stuff towards the web!

  6. Lady Gaga has revealed she will tour again at the start of very next year because she misses her fans.

  7. great work… Excellent weblog here! Also your web site a lot up fast! What web host are you the usage of? Can I get your associate link on your host? I want my website loaded up as fast as yours lol…

Leave a Reply

Your email address will not be published.