Skip to content
Related Articles

Related Articles

How to create a Horizontal Navigation Bar in HTML and CSS?
  • Last Updated : 30 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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


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

filter_none

edit
close

play_arrow

link
brightness_4
code

* {
/* 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


Final Code: This is the combination of all the above codes –

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :