CSS Horizontal Navigation Bar

CSS Horizontal Navigation Bar


CSS Horizontal Navigation Bar 
The horizontal Navigation bar is something that we see on almost every website in desktop mode.
We can create horizontal nav bar in two ways given as follow 
1. Using display : Inline Property
2. Using float property
Now we will see example - 
Example 1  -  Using display: inline -
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
.navbar{
            background-color: black;
            border-radius: 30px;
          }
          .navbar li{
          display: inline;
          list-style: none;
          margin: 13px 20px;
        }
          .navbar ul{
            overflow: auto;
        }
        .navbar li a{
            padding: 3px 3px;
            text-decoration: none;
            color: white;
        }
  </style>


  <link rel="stylesheet" href="sample.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Document</title>
</head>

<body>
  <header>
    <nav class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact us</a></li>
         
        </ul>
    </nav>
</header>
</body>

</html>
Output -
Example 2  - Using float : left -
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
.navbar{
            background-color: black;
            border-radius: 30px;
          }
          .navbar li{
            float:left;
            list-style: none;
            margin: 13px 20px;
        }
          .navbar ul{
            overflow: auto;
        }
        .navbar li a{
            padding: 3px 3px;
            text-decoration: none;
            color: white;
        }
  </style>


  <link rel="stylesheet" href="sample.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Document</title>
</head>

<body>
  <header>
    <nav class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact us</a></li>
         
        </ul>
    </nav>
</header>
</body>

</html>
Output -