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

Last Updated : 16 Oct, 2024

Creating a horizontal navigation bar in HTML and CSS involves using an unordered list (<ul>) for navigation items and applying CSS to style them for a horizontal layout.

We will create a horizontal navigation bar using HTML and CSS, including styling for layout, spacing, and appearance, as well as adding interactivity with hover effects and ensuring responsiveness to media queries.

Approach to Create Horizontal Navigation Bar

Create a <nav> Element: The <nav> element will serve as the container for your navigation bar. Inside it, you’ll use an unordered list (<ul>) with list items (<li>) for each navigation link.
Use CSS Flexbox for Layout: CSS Flexbox allows you to arrange the list items horizontally and control their spacing and alignment.
Add Styling for Links: Each navigation link (<a>) inside the list items will be styled for color, spacing, and hover effects to improve interactivity.
Make the Navbar Responsive: Media queries will help make the navigation bar responsive, adjusting the layout on smaller screens by switching from a horizontal layout to a vertical one.

Example: Horizontal Navigation Bar in HTML and CSS

Here is a complete example, including HTML and CSS:

HTML

<!DOCTYPE html> <html>  <head>     <title>Building a Horizontal Navigation Bar</title>     <style>         * {             margin: 0;             padding: 0;         }          body {             font-family: 'Arial', sans-serif;         }          .navbar {             display: flex;             position: sticky;             align-items: center;             justify-content: space-between;             top: 0px;             background: rgb(255 127 39);             background-blend-mode: darken;             background-size: cover;             color: white;             padding: 10px 20px;         }          .nav-list {             display: flex;             list-style: none;         }          .nav-list li {             margin-right: 20px;         }          .nav-list li:last-child {             margin-right: 0;         }          .nav-list li a {             text-decoration: none;             color: white;             font-size: 18px;             transition: color 0.3s ease-in-out;         }          .nav-list li a:hover {             color: #ffd700;             /* Change the color on hover */         }          .rightNav {             text-align: right;         }          #search {             padding: 8px;             font-size: 16px;             border: 2px solid #fff;             border-radius: 5px;         }          .btn {             background-color: #ffd700;             color: #000;             border: none;             padding: 8px 12px;             border-radius: 5px;             cursor: pointer;             transition: background-color 0.3s ease-in-out;         }          .btn:hover {             background-color: #000;             /* Change the background color on hover */             color: #ffd700;         }     </style> </head>  <body>     <nav class="navbar">         <ul class="nav-list">             <li><a href="#home">Home</a></li>             <li><a href="#about">About Us</a></li>             <li><a href="#services">Services</a></li>             <li><a href="#contact">Contact</a></li>         </ul>         <div class="rightNav">             <input type="text" name="search" id="search" placeholder="Search">             <button class="btn btn-sm">Search</button>         </div>     </nav> </body>  </html>

Output:

Horizontal Navigation Bar in HTML and CSS

How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?

codingbeast12

Improve

Article Tags :

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

Approach to Create Horizontal Navigation Bar

Example: Horizontal Navigation Bar in HTML and CSS

Similar Reads