Search Bar within Navigation Bar

Learn to create a responsive search bar within a navigation bar using HTML and CSS.

Preview
Code

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</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 Bar</h2>
  <p>Navigation bar with a search box and a submit button inside of it.</p>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

* {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;  
  }
}

```
No need of JavaScript
```

Introduction:
In this tutorial, we'll create a responsive search bar integrated within a navigation bar. This search bar adapts to different screen sizes, ensuring a seamless user experience on both desktop and mobile devices. The design is simple, clean, and easy to implement using basic HTML and CSS.

Code Explanation:
The search bar is placed inside a navigation bar, which includes links like "Home," "About," and "Contact." The search bar is aligned to the right of the navigation links on larger screens and stacks vertically on smaller screens, making it mobile-friendly. The code uses media queries to achieve this responsiveness.

HTML Structure:

The navigation bar is wrapped within a <div> element with the class topnav.
Navigation links are represented by <a> tags.
The search bar is part of a <form> element inside the search-container class, containing an <input> field and a submit <button>.

CSS Styling:

The topnav class gives the navigation bar a background color and controls the layout of the links and search bar.
The search bar is floated to the right on larger screens for alignment purposes.
A media query is used to stack the search bar and navigation links vertically on screens narrower than 600px, ensuring the design remains user-friendly on mobile devices.

Steps to Implement the Code:

HTML Setup:
Start by copying the HTML code provided into your project. Ensure that the Font Awesome library is linked to your project for the search icon to display correctly.
CSS Styling:
Add the CSS code either within a <style> tag in the <head> of your HTML document or in an external CSS file. This will style the navigation and search bar and make them responsive.
Test Responsiveness:
Adjust the browser window size to see the responsive behavior of the search bar. Modify the breakpoints in the media query if needed to better suit your design needs.
Customization:
Customize the colors, padding, and layout to match your website's design. You can also enhance the search functionality or add more navigation links as required.

Thank You:
Thank you for following this guide on creating a responsive search bar within a navigation bar. We hope this tutorial helps you implement a clean and functional search bar on your website. For more HTML and CSS tutorials, explore our other resources.