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 > |
chevron_right
filter_none
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; } |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output: