Create A Responsive Navbar with Icons using HTML CSS and JavaScript Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like Report The navigation bar, or Navbar is an essential component in modern web design. It allows users to navigate through a website easily. Adding icons to the navbar is not only enhances visual appeal but also improves user experience. The Responsive Navigation bar means the Navbar elements are visible on all sizes of devices i.e. in mobile devices, the navbar displays like a dropdown. Here, we will explore how to create a responsive navbar with icons using HTML, CSS, and JavaScript. HTML creates the structure of Navbar, CSS applies styles to make it attractive and user-friendly, and JavaScript adds a toggle function for menu items on the hamburger icon. Font Awesome Icons are used with menu items.Example: Here, we will create a responsive navbar with icons using HTML, CSS, and JavaScript. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Responsive Navbar with Icons</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <style> body { margin: 0; font-family: 'Arial', sans-serif; } .navbar { background-color: #4b8b01; overflow: hidden; } .navbar a { float: left; display: block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #2a93d5; } .navbar a .icon { margin-right: 8px; } .navbar a.icon { float: right; display: none; } .navbar.responsive a.icon { position: absolute; right: 0; top: 0; } .navbar.responsive a { float: none; display: block; text-align: left; } @media screen and (max-width: 600px) { .navbar a:not(:first-child) {display: none;} .navbar a.icon { float: right; display: block; } } </style> </head> <body> <div class="navbar" id="myNavbar"> <a href="#home"> <i class="fas fa-home icon"></i>Home </a> <a href="#courses"> <i class="fas fa-graduation-cap icon"></i>Courses </a> <a href="#jobs"> <i class="fas fa-briefcase icon"></i>Jobs </a> <a href="#news"> <i class="fas fa-newspaper icon"></i>News </a> <a href="#contact"> <i class="fas fa-envelope icon"></i>Contact </a> <a href="#about"> <i class="fas fa-info-circle icon"></i>About </a> <a href="javascript:void(0);" class="icon" onclick="myFunc()"> <i class="fas fa-bars"></i> </a> </div> <script> function myFunc() { let x = document.getElementById("myNavbar"); if (x.className === "navbar") { x.className += " responsive"; } else { x.className = "navbar"; } } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article Create A Responsive Navbar with Icons using HTML CSS and JavaScript V vkash8574 Follow Improve Article Tags : Project Web Technologies Geeks Premier League Web Templates Geeks Premier League 2023 +1 More Similar Reads How to create a Responsive Bottom Navigation Menu with CSS and JavaScript. A responsive bottom navigation menu provides mobile-friendly access to important links. We will see how to create a responsive bottom navigation menu that adjusts to different screen widths. The menu will include elements like Home, Contact, and About. When viewed on a smaller screen, a hamburger me 2 min read How to Create a Responsive Top Navigation Menu with CSS & JavaScript? Top navigation menus offer users immediate access to key sections of a website. A responsive top navigation menu enhances user experience because if our website is fully responsive then it can be accessible by any device like PC, mobile, or tab. PreviewApproachFirst, create a basic HTML structure fo 5 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 Portfolio Website using HTML CSS and JavaScript ? A portfolio website is a website that represents you online on the web pages. It contains different sections like Introduction to Yourself, About You, Your Services, Your Contact Details, and Your Portfolio. We are going to build all of the sections with an interactive and attractive web design that 15+ min read How to Create a Responsive Login Form in Navbar using CSS? A Responsive Login form in the Navbar allows users to log in from any page of the website without navigating to a separate login page. This article explains how to create a Responsive Login form within a Navbar using CSS.ApproachStart by creating a <nav> element to contain the navbar.Inside th 2 min read How to create a revealing sidebar using HTML CSS and JavaScript? A revealing sidebar is a hidden UI element that becomes visible upon user interaction, such as clicking or swiping, providing navigation links. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked. ApproachCreate an HTML file with headings and 3 min read Create a Mobile Toggle Navigation Menu using HTML, CSS and JavaScript To create a Mobile Toggle Navigation Menu you need HTML, CSS, and JavaScript. If you want to attach the icons with the menu then you need a font-awesome CDN link. This article is divided into two sections: Creating Structure and Designing Structure.A glimpse of complete Navigation:Â Creating Structur 3 min read How to create a Responsive Navigation Bar in Tailwind CSS ? A Responsive Navigation Bar with collapsible elements is a crucial component of modern web design, allowing users to navigate seamlessly across various screen sizes. In this article, we'll explore how to implement such a navigation bar using Tailwind CSS, a utility-first CSS framework that enables r 2 min read Slide Down a Navigation Bar on Scroll using HTML, CSS and JavaScript To create a slide down navigation bar you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, CSS will make it looks good. This kind of sliding navbar looks attractive on a site. By using JavaScript you can easily make the navigation bar slideable when the user scrolls d 4 min read How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ? The Shrink Navigation bar works when the user scrolls down the page. In this article, we will use HTML, CSS, and JavaScript to design a shrink navigation bar. HTML is used to create the structure, and CSS is used to set the style of the HTML structure to make it looks good. This kind of shrinking na 3 min read Like