Responsive Navbar with Search Box using HTML CSS & JavaScript

Hello readers, Today in this blog, you'll learn how to create Fully Responsive Navbar with Search using HTML CSS & JavaScript. Earlier I have shared many blogs about Responsive Navigation Bar and Responsive Sidebar Menu but still, I have not shared any blog on Responsive Navbar with Search Box. So now, it's time to create Responsive Navbar with Search Box.

A navigation bar is a user interface element within a webpage that contains links to other parts of the website. A website navigation bar is most usually displayed as a horizontal list of links at the top of each page.

Today in this blog, I'll share with you this program (Responsive Navbar with Search Box). This navbar is fully responsive to any device. On mobile devices, this navbar will adjust their height-width automatically 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 to the search button, it won't show you any results.

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Navbar with Search Box).

Video Tutorial of Responsive Navbar with Search Box



As you have seen in the video, this Navbar is fully Responsive for any devices. If you're a beginner in Web Designing then this tutorial helped you to understood the basic codes and concepts behind creating the Responsive Navbar and their Search Box.

If you like this program (Responsive Navbar with Search Box) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects and websites. If you know JavaScript perfectly then you can easily make this search box workable with adding some JavaScript codes.

You might like this:


Responsive Navbar with Search Box [Source Codes]

As always, before sharing the codes of this program (Responsive Navbar with Search Box). Let's 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, <nav> tag highly used to create Navbar. Then I created a <div> with the class name ".logo". After that, I created an another <div> with the class name "nav-items" and placed five <li> tags inside it. Inside each <li> tag I created <a> anchor tag.

Inside href attribute of <a> 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 on the 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 navbar 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 three-click function for Cancel, Menu, and Search Button. Then I changed the CSS values of Navbar and Search box on the particular button clicked.

To create this program (Responsive Navbar with Search Box). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

CSS FILE:


Thanks for visiting, keep visiting.


16 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. its very nice, please prepare dash board design for school management system and simple school management software its very use full for many schools

    ReplyDelete
  2. how to include the font awesome file in visual studio?

    ReplyDelete
    Replies
    1. You need to add font awesome CDN link inside head tag of your html file.

      Delete
  3. How can we make the search button working ?

    ReplyDelete
  4. How can we make the search box working ? and your video is too awesome. thanks for the awesome content.

    ReplyDelete
  5. We need JavaScript for that. I'll make video on it.

    ReplyDelete
  6. hello sir! i want to know how to make the search box work i mean like it gets us to places im a web dev and i want to make a resturant search so please help me with it

    ReplyDelete
  7. great,
    I went to Responsive Navbar with Search Box and Sidebar Menu both

    ReplyDelete
    Replies
    1. Great You can find the codes of this designs on this website...Search it!

      Delete
  8. hi sir how put txt messege in about?

    ReplyDelete
  9. hi sir how to put txt messge in about?

    ReplyDelete
    Replies
    1. If you're using blogger...you need to create a page and write there.

      Delete
  10. You're the best @Codingnepal. Thanks a lot

    ReplyDelete

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post