After this tutorial, you will learn how to create a responsive navigation menu with icons using CSS without using any jQuery files and codes.
Follow the below steps to create responsive navigation bar with icons using css.
Step 1. Create a html file and add below HTML code:
1 2 3 4 5 6 7 8 9 10 | <!-- Load an icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ font-awesome/4.7.0/css/font-awesome.min.css"> <div class="navbar"> <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> <a href="#"><i class="fa fa-fw fa-search"></i> Search</a> <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> <a href="#"><i class="fa fa-fw fa-user"></i> Login</a> </div> |
Step 2. Add the below CSS code inside your HTML page using style tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /* Style the navigation bar */ .navbar { width: 100%; background-color: #555; overflow: auto; } /* Navbar links */ .navbar a { float: left; text-align: center; padding: 12px; color: white; text-decoration: none; font-size: 17px; } /* Navbar links on mouse-over */ .navbar a:hover { background-color: #000; } /* Current/active navbar link */ .active { background-color: #4CAF50; } /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */ @media screen and (max-width: 500px) { .navbar a { float: none; display: block; } } |
Now save your page and open in any web browser to see the output. Resize the browser window to see the responsive of navigation bar.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
