Skip to content
Related Articles

Related Articles

Improve Article

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




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




My Personal Notes arrow_drop_up
Recommended Articles
Page :