How to create a Horizontal Navigation Bar in HTML and CSS?

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("https://media.geeksforgeeks.org/wp-content/uploads/20201215124609/Capture-300x14.PNG");    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("https://media.geeksforgeeks.org/wp-content/uploads/20201215124609/Capture-300x14.PNG");    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:
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS