How to Create Responsive Top Navigation Menu Bar with a Search Box and Icon
Menu Search Bar
How To, for Web Applications
By: Chrysanthus Date Published: 26 Mar 2025
This tutorial explains How to Create Responsive Top Navigation Menu Bar with a Search Box and Icon. The navigation bar is horizontal, and placed at the top of the webpage. The search box and its submit icon are floated to the right of the bar, and the hyperlinks are floated to the left of the bar. The responsive nature is the fact that, when the webpage is viewed at a device screen that is less than 600px, the menu items will be in a vertical bar, with the submit icon taking the last place down and the search field itself, taking the last but one place.
The complete webpage code is at the end of this tutorial. The reader should copy the complete code into a text editor, save the file with any name, but with the extension, .html . Open the saved file in the browser to appreciate the design. Reduce the width of the browser window continuously, until the horizontal bar becomes vertical. The reader is advised to do that before continuing to read this tutorial.
The Webpage Skeleton Code
The skeleton code for the webpage, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Full Page Tabs</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern professional webpage should have at least the first four tags in the HTML head element above. The HTML style element will have a lot of code.
Icons are normally found in icon libraries, already coded. font-awesome/4.7.0 is a free icon library available in the cloudflare.com website. The stylesheet link tag above imports the library into the webpage. This library has the search icon. The script tag is left empty.
Strategy
All the menu items will be in an HTML div element. This div element is the bar. The hyperlinks will be floated to the left inside the div element. The container for the search box is another div element, which is inside the bar div. This second (sub) container which is block-level by default, is floated right in the div bar. The search box and its submit icon are inside an HTML Form element. The Form element is a block level element, meaning it should take the whole width of its container. However, since its div container is floated right, itself and its contents all form an inline-block element, and stay on the right.
The floating left and right of menu items within the same div element, introduces complications for browsers. These complications are resolved by including the property, "overflow: hidden;" in the CSS rule for the div bar.
The HTML body Content
The HTML body content for the project is:
<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="/acton_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>
The class-name for the div bar is "topnav" . There are three hyperlink elements in the div bar. The anchor(a) element is the code form of the hyperlink. So there are three anchor elements in the div bar. These anchor elements will be floated left within the bar, as they are typed. After the anchor elements typed, is the div container for the search box and its button icon. This div container and all its content is floated right within the div bar. Inside this container div, is an HTML Form element. The class-name of this div container is "search-container".
The div element and the Form element are block-level elements by default. When a block-level element is floated left or right, it becomes an inline-block element, which is an element between block-level and inline-level. The Form element is a block level element inside a div element which is also a block level element. This div element is floated right. Floating a block-level element containing another block-level element leads to complication for the browser.
The Form element has two inline elements which are the input-text element and the submit button. The input-text element is for the search field (box), and the submit button has the content, "<i class="fa fa-search"></i>", which is the icon. This is actually an i element. The value of the class attribute is "fa fa-search" . This identifies two CSS rules in the imported font-awesome/4.7.0 library, which converts the i element into a search icon.
The whole search box assembly, is in one line on the right of the div bar.
In general, when HTML elements are floated left and/or right in a div element, they introduce complications in the overall style presentation of the div, and in the case of this project, the issue is resolved by including the property, "overflow: hidden;" in the CSS rule for the div bar.
The div element for the style, "padding-left:16px" is for the main content of the webpage.
The HTML Style Element
The most important thing to remember is that the hyperlinks are floated left and the div assembly for the search field and button are floated right. The menu items are styled. The form element is not styled but its contents of search field and button are styled.
There is a media query CSS rule, which converts the horizontal bar into a vertical bar, when the screen width is below or equal to 600px.
In general, when HTML elements are floated left and/or right in a div element, they introduce complications in the overall style presentation of the div, and in the case of this project, the issue is resolved by including the property, "overflow: hidden;" in the CSS rule for the div bar.
It is assumed at this point that the reader knows how to style the menu items. If the reader is not conversant with styling menu items, then reading through the complete webpage code below, should help.
The Complete Web Page Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Icon Responsive Search Bar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
div.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
div.topnav a {
float: left;
color: black;
text-align: center;
font-size: 17px;
padding: 14px 16px;
text-decoration: none;
}
div.topnav .search-container {
float: right;
}
div.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
div.topnav .search-container button {
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
div.topnav a:hover {
background-color: #ddd;
color: black;
}
div.topnav .search-container button:hover {
background: #ccc;
}
div.topnav a.active {
background-color: #2196F3;
color: white;
}
@media screen and (max-width: 600px) {
div.topnav .search-container {
float: none;
}
div.topnav a, div.topnav input[type=text], div.topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
div.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
</head>
<body>
<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="/acton_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>
</body>
</html>
Read through the code, if you have not already done so; and note the presence and position of the CSS property, "overflow: hidden;" . The reader should copy the complete code into a text editor, save the file with any name, but with the extension, .html . Open the saved file in the browser to appreciate the design. Reduce the width of the browser window continuously, until the horizontal bar becomes vertical.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK