Study Smart, Not Hard. - StudyMuch

CSS Navigation Bar

Published by StudyMuch on

Navigation Bar studymuch.in

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.

Navigation Bar with HTML CSS

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 –


0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *