How to Add a Search Box Inside a Responsive Navigation Menu

In this tutorial, we will be discussing how to add a search box inside a responsive navigation menu.

A search box inside a navigation menu is a useful feature for users, especially for websites with a lot of content.

We will be using HTML, CSS, and JavaScript to create a responsive search box inside the navigation menu.

A search box inside the navigation menu makes it easier for users to quickly search for specific content on the website.

This saves time and effort compared to having to navigate to a separate search page.

It also provides a better user experience as users can access the search feature directly from the navigation menu.

HTML Structure

We will start by creating the HTML structure for our navigation menu and search box.

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li>
        <form>
          <input type="text" placeholder="Search...">
          <button type="submit">Search</button>
        </form>
      </li>
    </ul>
  </nav>
</header>

In the code above, we have created a header element that contains a navigation menu.

The navigation menu consists of an unordered list with five list items.

The fifth list item contains a form element with an input field and a submit button.

CSS Styling

Next, we will add some CSS styles to make our navigation menu and search box responsive.

header {
background-color: #333;
color: #fff;
padding: 20px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}

nav ul li {
display: inline-block;
background-color: #333;
color: #fff;
padding: 10px 20px;
}

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: inherit;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

form {
display: flex;
margin-left: auto;
}

input[type="text"] {
padding: 10px;
border-radius: 5px 0 0 5px;
border: 1px solid #ccc;
width: 250px;
}

button[type="submit"] {
padding: 10px 20px;
border-radius: 0 5px 5px 0;
background-color: #333;
color: #fff;
border: 1px solid #333;
cursor: pointer;
}

In the CSS code above, we have styled our header and navigation menu to have a dark background color and white text color.

We have also made the navigation menu a flex container and aligned the items to the right.

The form element is also styled to be a flex container and aligned to the right.

The input field and submit button have been given appropriate padding, border-radius, and colors.

JavaScript Functionality

Lastly, we can add some JavaScript functionality to submit the form and perform a search.

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
event.preventDefault();

const inputValue = form.querySelector('input[type="text"]').value;

// Perform a search based on the input value
});

In the JavaScript code above, we have selected the form element and added a submit event listener to it.

The event listener prevents the default form submission and gets the value of the input field.

With this value, we can perform a search based on the input value.