How to make a Responsive Search Bar with Navbar in HTML?

Leave a Comment / CSS, HTML / By

Hello Coders, In this blog post you will about how to make a responsive search bar with a navbar in HTML and CSS. It is very easy to create a responsive search bar and Navbar.

 

Let us start and learn about Navbar and Search bar. The navbar is an Interface element on a webpage that is used to link other pages. It is mostly present on the top of every website. A Responsive Search bar is an element that is used to search through our full website or webpage. 

Responsive Search bar and navbar

HTML AND CSS

Index.html

<!DOCTYPE html>
<html>
 <head>
    <title>
        Responisve Search Bar using HTML and CSS
    </title>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <link rel=”stylesheet” href=”style.css”>
    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
 </head>
 
 <body>
     
    <div id=”navlist”>
        <a href=”#”>Home</a>
        <a href=”#”>Blog</a>
        <a href=”#”>Contact Us</a>
        <a href=”#”>About Us</a>
        <div class=”search”>
            <form action=”#”>
                <input type=”text” placeholder=” Search Our Blog” name=”search”>
                <button type=”submit”>
                    <i class=”fa fa-search”>
                    </i>
                </button>
            </form>
        </div>
    </div>
    <div class=”content”>
        <br>
        <br>
        <h1 style=”color:rgb(4, 70, 123); text-align: center;”>
            Code Blockx
        </h1>
        <h2 style=”color:rgb(0, 53, 96); text-align: center;”>
            Solution for all your coding problems
        </h2>
       <p style=”font-size: 22px;”>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat iusto quibusdam dolores odit, aliquid rem iste tempora eius mollitia id ullam nesciunt modi, necessitatibus asperiores, quo quaerat vel a reprehenderit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quod vel distinctio molestias nobis! Modi tempore, porro est quis placeat rerum vitae dicta odio voluptates sunt et repudiandae accusantium esse.
        </p>
 
 
    </div>
  </body>
 
</html>               

OUTPUT

Fully Responsive search and navbar

Style.css

  #navlist {
    background-color: #0074D9;
    position: absolute;
    width: 100%;
  }
     
  #navlist a {
    float:left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 15px;
  }
  .navlist-right{
    float:right;
  }
  #navlist a:hover {
    background-color: #ddd;
    color: black;
  }
  .search input[type=text]{
    width:400px;
    height:30px;
    border-radius:15px;
    border: none;
  }
  .search{
    float:right;
    margin:7px;
  }    
  .search button{
    background-color: #0074D9;
    color: #f2f2f2;
    float: right;
    padding: 5px 10px;
    margin-right: 16px;
    font-size: 18px;
    border: none;
    cursor: pointer;
  }

How to add a search icon in the Search bar?

Sometimes this question arrives about how to add a search button with the search bar. what is its code? so the solution to this is you need to add 

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
line in your code in the head section. This is the link to the search image. after this, you need to add 
button type=”submit”>
                    <i class=”fa fa-search”>
                    </i>
                </button>
Your search will be now visible.

Hope this blog was helpful to you. As you have now learned how to create a responsive search and nav bar in HTML you should now move ahead and learn to make a Responsive footer in HTML. We have explained it in detail here.

Thank you for visiting our blog. If you have any other questions let us know in the comments section. we will answere it  as soon as possible.

Recent Posts

Similar Posts

Leave a Comment

Your email address will not be published. Required fields are marked *