CSS sample code with search navigation bar

Time:2021-10-22

This article introduces how to use CSS to create a navigation bar with search.

The following examples are all reactive.

You can look at the renderings first:

Create a search bar

<div class="topnav">
  < a class = "active" href = "#home" > Home Page</a>
  < a href = "#about" > about</a>
  < a href = "#contact" > contact us</a>
  < input type = "text" placeholder = "search.." >
</div>
/*Add a black background color to the top navigation bar*/
.topnav {
    overflow: hidden;
    background-color: #e9e9e9;
}
 
/*Set the link style for the navigation bar*/
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
 
/*Change the color of the link when hovering*/
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
 
/*Highlight the currently selected element*/
.topnav a.active {
    background-color: #2196F3;
    color: white;
}
 
/*Set the search box style for the navigation bar*/
.topnav input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
}
 
/*When the screen width is less than 600px, the vertical stack displays menu options and search boxes*/
@media screen and (max-width: 600px) {
    .topnav a, .topnav input[type=text] {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px;
    }
    .topnav input[type=text] {
        border: 1px solid #ccc;
    }
}

CSS with search navigation bar – with submit button

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
< title > rookie tutorial (runoob. Com) < / Title >
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #2196F3;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 8px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}
</style>
</head>
<body>

<div class="topnav">
  < a class = "active" href = "#home" > Home Page</a>
  < a href = "#about" > about</a>
  < a href = "#contact" > contact us</a>
  <div class="search-container">
    <form action="/action_page.php">
      < input type = "text" placeholder = "search.." name = "search" >
      < button type = "submit" > submit < / button >
    </form>
  </div>
</div>

<div style="padding-left:16px">
   <h2>Responsive search menu</h2>
   <p>There is a search box in the navigation bar</ p>
   <p>Adjust the size of the browser window to see the effect</ p>
</div>

</body>
</html>

CSS navigation bar with search Icon

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
< title > rookie tutorial (runoob. Com) < / Title >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #2196F3;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}
</style>
</head>
<body>

<div class="topnav">
  < a class = "active" href = "#home" > Home Page</a>
  < a href = "#about" > about</a>
  < a href = "#contact" > contact us</a>
  <div class="search-container">
    <form action="/action_page.php">
      < input type = "text" placeholder = "search.." name = "search" >
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<div style="padding-left:16px">
  <h2>Responsive search menu</h2>
  <p>There is a search box in the navigation bar</ p>
  <p>Adjust the size of the browser window to see the effect</ p>
</div>

</body>
</html>

This is the end of this article about the sample code of CSS with search navigation bar. For more information about CSS search navigation bar, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

The story of Luo Meiqi and Chun Porter

Author Liao TianSource|Alibaba cloud official account Reading Guide:After more than six months of incubation, rocketmq spring officially graduated as a subproject of Apache rocketmq and released its first release version 2.0.1. This project encapsulates the rocketmq client in the way of spring boot, which allows users to send and consume messages through simple annotation and […]