How to Create a Horizontal Navigation Bar in HTML and CSS? Last Updated : 16 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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 BarCreate 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 CSSHere 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 Comment More infoAdvertise with us Next Article How to Create a Horizontal Navigation Bar in HTML and CSS? C codingbeast12 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to create Vertical Navigation Bar using HTML and CSS ? After reading this article, you will be able to build your own vertical navigation bar. To follow this article you only need some basic understanding of HTML and CSS. Let us start writing our vertical navigation bar, first, we will write the structure of the navigation bar. In this tutorial, we crea 3 min read How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ? The Navigation bar or navbar or menu-bar is the most important component of any web or mobile application. The user can only navigate from one page to another page through this menu. It is usually provided at the top of the website to provide a better UX (user experience). Approach: The approach is 3 min read Create a Hoverable Side Navigation with HTML, CSS and JavaScript To create hoverable side navigation with icon on any website there is a need for two things HTML and CSS. If you want to attach the icons on the navigation bar then you need a font-awesome CDN link. These features make the website looks cool than a normal website where the nav-bar is old-school desi 4 min read How to Create a Navigation Bar with CSS Flexbox? The navigation bar is a crucial aspect of modern web design. We can create a responsive navigation bar using CSS Flexbox, which provides a flexible and efficient way to layout elements, making it an excellent choice for creating navigation bars. Below are different possible ways for creating differe 5 min read How to create navigation bar using <div> tag in HTML ? In this article, we will know to create the navigation bar using the <div> tag in HTML. The Navbar is a navigation header that contains the links to navigate to the different pages or sections of the site that helps to make the website interactive. The navbar is an important & fundamental 3 min read Like