How to create a horizontal navigation bar without using floats in CSS

Arif Billah Babu

          

  CSS



Image not found!!

Creating a horizontal navigation bar without using floats in CSS is possible and often preferred for cleaner and more modern layouts. One popular approach is to use flexbox. Here's an example of how you can create a horizontal navigation bar using flexbox:

html
<!DOCTYPE html>

<html lang="en">

<head>
  
<meta charset="UTF-8">
  
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
<title>Horizontal Navigation Bar</title>
  
<style>
  body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    
  header {
      background-color: #333;
      color: #fff;
      padding: 10px;
    }

    
  nav {
      display: flex;
      justify-content: space-around;
      background-color: #444;
      padding: 10px 0;
    }

    
  nav a {
      color: #fff;
      text-decoration: none;
      padding: 10px 20px;
      transition: background-color 0.3s ease;
    }

    
  nav a:hover {
      background-color: #555;
    }
  
</style>


</head>


<body>

  
<header>
    
       <h1>My Website</h1>
  
</header>

  
        <nav>
    
           <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  
        </nav>



</body>

</html>

In this example:

  • The header contains the site title and has a dark background.
  • The nav element uses flexbox (display: flex) to create a horizontal layout, and justify-content: space-around adds space around the navigation items.
  • Each navigation item (nav a) has padding, color, and a transition effect for better visual feedback.
  • The :hover pseudo-class is used to change the background color when a user hovers over a navigation item.

Feel free to customize the styles to fit the design of your website. This example is just a starting point.



=== Happy Coding :)

Category List