CSS Navigation Bar
CSS Navigation Bar
Navigation bar is the most important part of any Websites and Web pages. In navigation, we put link of pages and Menu. In this article “CSS Navigation Bar” we have given you the Source Code of Responsive Navigation.
Navigation Bar
A navigation bar is basically a list of links in the top of any Websites, with using the <ul> and <li> elements for make perfect sense and using <a> elements for put the link of any pages.
In this Source Code, we build a navigation bar with using standard HTML List and <a> Anchor tag of HTML. And styling with CSS values for outstanding and attractive Navigation Bar. We also add Search Bar in right side of Navbar. See below image of this Navigation Bar.
Source Code of Navigation Bar
Here you get Source Code of Navbar, both HTML and CSS Source Code for your practice and practical. Below you get Source Code of both HTML and CSS, you can edit this code with your choice of design and create best navigation.
HTML Source Code of Navigation Bar:
<!DOCTYPE html> <html lang="en"> <head> <!-- Coded by Shubham Verma (StudyMuch) --> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>Navigation Bar</title> </head> <body> <head> <nav class="navbar"> <ul> <li> <a href="">HOME</a></li> <li> <a href="">ABOUT US</a></li> <li> <a href="">DISCLAIMER</a></li> <li> <a href="">CONTACT US</a></li> <div class="search"> <input type="search" name="search" placeholder="Search"> </div> </ul> </nev> </head> </body> </html>
Above code is only HTML Source Code, where we have created Navigation Bar only from HTML elements, HTML elements included (<nav>, <li>, <ul>, <input> and <div>).
CSS Source Code of Navigation Bar:
.navbar{ background-color: rgb(1 6 84); color: rgb(148, 250, 139); border-radius: 20px; } .nevbar li{ float: left; list-style-type: none; margin: 11px 8px; } .nevbar ul{ overflow: auto; } .nevbar li a{ padding: 5px 5px; color: aqua; text-decoration: none; font-size: 12px; } .nevbar li a:hover{ color: rgb(246, 238, 3); } .search{ padding: 10px52px; float: right; } .nevbar input{ border: 1px solid #04b7fb; background-color: #04b7fb; color: white; border-radius: 30px; font-size: 15px; padding: 2px; width: 100px; }
Above code is CSS Source Code, where we styled the Navigation Bar for creating attractive and stylish Navigation. For run this code in your system copy the code of HTML and CSS both, paste on different – different and cave the fire with extension .html for HTML file and .css for CSS file after that link the CSS file with HTML file and save or run. You can also paste both code (HTML & CSS) in on file.
So, this article is mainly made to give you the source code of Navbar, here we provided you both HTML and CSS Source Code of Navigation Bar. This navbar is responsive. If you like this , then definitely write something in the comment section.
Read Also –
- Create attractive Contact Form with HTML and CSS.
- Create Responsive Web Pages with HTML, CSS & JavaScript.
- How to create stylish Table with HTML and CSS.
- Learn Full Tutorial of HTML with programming examples.
- Learn Full Tutorial of CSS with programming examples.
- Get all Programming Source Code of HTML and CSS.
0 Comments