How to create a Horizontal Navigation Bar in HTML and CSS?
In this article, we will try to create a navigation bar horizontally. To understand this article, we need to know some basics of HTML and CSS.
Approach:
- We will create the structure of the navigation bar which will later be displayed horizontally.
- The tags that we will use for this is <nav> tag and <ul> tag. Here nav tag will be acting as a container for the list of items that will be used for navigation. Ul will also be used to list the number of items that the user will navigate.
- Now we have the structure of the navigation bar. So we will apply CSS properties like flex to make the navigation bar appeared horizontal.
Example:
HTML
<!DOCTYPE html><html> <head> <title> Horizontal Navigation Bar </title> </head> <body> <!-- here in nav tag used two classes that is navbar and background--> <!-- each class declared in nav tag will be used to design the form using CSS--> <nav class="navbar background"> <!-- we have used list tag that is ul to list the items--> <ul class="nav-list"> <li><a href="#Car">Car</a></li> <li><a href="#file">file</a></li> </ul> <!-- we have used rightnav in order to design the seachbar properly by using CSS--> <div class="rightNav"> <!-- the value that search bar will take is text --> <input type="text" name="search" id="search" /> <button class="btn btn-sm">Search</button> </div> </nav> </body></html> |
The output of the code:
Now we have the structure of the table. So we will design the navigation bar, and we will use property like flex to make the navigation bar appear horizontal.
CSS
* {/* Here we set the margin and padding 0 */ margin: 0; padding: 0;} .navbar { display: flex; /* This is used to make the navbar sticky, So that the navbar stays at the top part even if we scroll */ position: sticky; align-items: center; justify-content: center; top: 0px; /*it specifies the mouse cursor to be displayed when it is pointed over the element */ cursor: pointer;} .nav-list { width: 50%; display: flex;} .nav-list li { list-style: none; padding: 26px 30px;} .nav-list li a { text-decoration: none; color: white;} .nav-list li a:hover { color: black;} .rightNav { width: 50%; text-align: right;} #search { padding: 5px; font-size: 17px; border: 2px solid grey; border-radius: 9px;} .background { background: rgba(0, 0, 0, 0.4) url( background-blend-mode: darken; background-size: cover;} |
Final Code: This is the combination of all the above codes –
HTML
<!DOCTYPE html><html> <head> <title> Horizontal Navigation Bar </title> <style> * {/* Here i made the margin and padding 0 */ margin: 0; padding: 0;} .navbar { display: flex; /* This is used to make the navbar sticky, So that the navbar stays at the top part even if we scroll */ position: sticky; align-items: center; justify-content: center; top: 0px; /*it specifies the mouse cursor to be displayed when it is pointed over the element */ cursor: pointer;} .nav-list { width: 50%; display: flex;} .nav-list li { list-style: none; padding: 26px 30px;} .nav-list li a { text-decoration: none; color: white;} .nav-list li a:hover { color: black;} .rightNav { width: 50%; text-align: right;} #search { padding: 5px; font-size: 17px; border: 2px solid grey; border-radius: 9px;} .background { background: rgba(0, 0, 0, 0.4) url( background-blend-mode: darken; background-size: cover;} </style> </head> <body> <!-- here in nav tag i have used two classes that is navbar and background--> <!-- each class declared in nav tag will be used to design the form using CSS--> <nav class="navbar background"> <!-- we have used list tag that is ul to list the items--> <ul class="nav-list"> <li><a href="#Car">Car</a></li> <li><a href="#file">file</a></li> </ul> <!-- we have used rightnav in order to design the seachbar properly by using CSS--> <div class="rightNav"> <!-- the value that search bar will take is text --> <input type="text" name="search" id="search" /> <button class="btn btn-sm">Search</button> </div> </nav> </body></html> |
Output:
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.
