Create Responsive Navbar using HTML CSS jQuery

How To Create Responsive Navbar using HTML, CSS & jQuery

Responsive navigation bar using html css jquery
Responsive Navbar like Bootstrap Navbar using HTML CSS jQuery CodingTuting

A beautiful Responsive Design Navigation Menu is important for a website. The Navigation Menu Bar is also known as Navbar, Menubar, etc.


What is Navbar in HTML?

A Navbar is a strip which contains the menu/links of other pages. Eg: Home, About, Contact, etc. There are two types of Navbar. 1. Horizontal Navbar, 2. Vertical Navbar. We'll create a Horizontal Navigation Bar.



In this tutorial, we'll create a beautiful responsive design navbar using HTML, CSS, and jQuery. Generally, people use Bootstrap Navbar. Especially new designers who haven't much knowledge about CSS & JS, go with Bootstrap.

Understand jQuery more. Click here

Many websites are responsive, but it is not sure that - the Bootstrap has used on that website. If you are doing the job in the company- You may get a task to make Responsive Menu without using Bootstrap. So, you have to do it.

But can we create a responsive navbar without bootstrap? The simple answer is - Yes. So How to do it ? Here we'll create a beautiful colorful responsive navbar with dropdown without bootstrap. Let's begin.


Step 1- HTML Design of Navbar

Create a division and make an HTML Unordered List of menus and a form for Search Box in the division. Give a discriptive class name for applying CSS.


Step 2- Add Required Styles and Scripts

Create an empty CSS page "Style.css" and add it in the <head> section of the page. We are using the Font Awesome icon in our code. You can use another icon. Or you can go with Font Awesome.

Also, we'll create a small jQuery function. So add Font Awesome and the jQuery before the closing of the </body> tag.

Here is the Code of the HTML Design.

<!DOCTYPE html>
<html lang="en">

 <head>
  <title> Beautiful Navbar </title>
  
  <meta content="width=device-width, initial-scale=1" name="viewport" />
  
  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
  
  <div class="nav nav-sky">
   
   <div class="menu-btn"> <i class="fas fa-bars"></i> </div>
   
   <div class="nav-elements">
   
    <ul class="nav-content">
     
     <li> <a href="#" title="Home" class="active"> <i class="fas fa-home"></i> Home </a> </li>
     
     <li> <a href="#" title="About"> <i class="fas fa-address-card"></i> About </a> </li>
     
     <li>
      
      <div class="dropdown">
       
       <a href="#" class="dropdown-link" title="Gallery">
        <i class="fas fa-camera"></i> Gallery <i class="fas fa-caret-down"> </i>  
       </a>
       
       <div class="dropdown-menu">       
        
        <a href="#" title="Option 1"> Opton 1 </a>
        <a href="#" title="Option 2"> Opton 2 </a>
        <a href="#" title="Option 3"> Opton 3 </a>
        
       </div>
       
      </div>
      
     </li>
     
     <li> <a href="#" title="Contact"> <i class="fas fa-phone"></i> Contact </a> </li>
     
    </ul>
   
    <form class="search-area">
     <input type="text" name="search" placeholder="Search Item" title="Search Item">
     <button class="btn-search" name="search-button" title="Search">Search</button>
    </form>
    
   </div>
  
  </div>

    <script data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script defer data-src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script>
    </body>
</html>


Step 3- Add CSS

Give style for make inline list item of <ul>. Styles for coloring and all. We've also added the @media query in the CSS to make it responsive. Make sure to write good CSS in proper indentation according to the design.

/* CSS for style layout start*/
.nav {
 padding: 0px 50px;
    font-family: sans-serif;
}

 .nav .menu-btn {
  display:none;
 }
 
.nav-content {
 padding: 0;
 list-style-type: none;
 display: inline-block;
 margin: 0px;
}

 .nav-content li {
  display: inline-block;
 }
 
  .nav-content li a {
   text-decoration:none;
   padding: 14px 10px;
   display: flex;
  }
  
   .nav-content li a .fa-caret-down {
    padding: 0px 10px;
   }

.dropdown .close-dropdown .fa-times {
 padding-right:10px;
 float: right;
 display:none;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    position: absolute;
    z-index: 1;
    min-width: 130px;
 display:none;
}

.search-area {
 float:right;
 list-style-type: none;
 display: inline-block;
 padding: 8px;
}

 .search-area input {
  border-radius: 4px;
  padding: 6px;
  transition: all .5s;
 }
 
 .search-area input:focus {
  border-radius: 4px;
  outline: none;
 }

.btn-search {
 border-radius: 4px;
 padding: 6px;
    cursor: pointer;
 transition: all .5s;
}

svg:not(:root).svg-inline--fa {
    padding-right: 5px;
}
/*  CSS for style layout end*/


/* CSS Media Query for 768p start */
@media screen and (max-width: 768px) {
 
 .bottom-border-nav{
  border-bottom:0.1px solid;
 }
 
 .nav {
  padding: 0px;
 }
 
 .nav .menu-btn {
  display:block;
  padding: 10px;
  font-size:2rem;
 }
 
 .nav-elements {
  display:none;
 }
 
 .nav-sky .search-area {
  border-top: 1px solid #fff;
 }
 
 .nav-content {
  display: block;
 }
 
  .nav-content li {
   display: block;
  }
 
 .dropdown-menu {
  position: relative;
  min-width: auto;
 }
 
  .dropdown-menu a {
   padding-left: 20px !important;
  }
  
 .search-area {
  float: none;
  width: 100%;
  padding: 12px 8px;
  border-top:0.1px solid;
 }
} 
/* CSS Media Query for 768p end */


/* CSS for sky theme start*/
.nav-sky {
 color:#fff;
 background-image: linear-gradient(#44adff, #8acbfd);
}

 .nav-sky .nav-content li a {
  color:#fff;
 }
 
 .nav-sky .nav-content li a:hover, .nav-sky .dropdown:hover .dropdown-link {
  background-image: linear-gradient(#1096ff, #5fb8ff);
 }
  
 .nav-sky .dropdown-menu {
  background-color: #a2d5fd;
  box-shadow: 0px 5px 10px #abdaff;
 }
 
 .nav-sky .search-area input {
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
 }
 
 .nav-sky .search-area input:focus {
  box-shadow: 0px 0px 10px #fff;
 }

 
 .nav-sky .search-area input::placeholder {
  color:#fff;
 }
 
 .nav-sky .btn-search {
  background: transparent;
  border: 1px solid #fff;    
  color: #fff;
 }
 
 .nav-sky .btn-search:hover, .btn-search:focus {
  background-color: #0182e6;
  border: 1px solid #0182e6;    
  color: #fff;
 }

 .nav-sky .active {
  background-image: linear-gradient(#1096ff, #5fb8ff);
 }
/* CSS for sky theme end*/


Step 4- Add jQuery Function

Add simple jQuery function before closing the </body> tag for a slide up and slide down the menu in small devices.

<script>
    $(document).ready(function(){
        $(".menu-btn").click(function(){
            $(this).toggleClass("bottom-border");
            $(this).next(".nav-elements").slideToggle("slow");
        });
    });
</script>


Here is the output picture of our code

Responsive navigation bar using html css jquery
Responsive Navigation Bar Nav Sky HTML CSS jQuery CodingTuting

Mobile Responsive View

View of Mobile Friendly Gradient Navigation HTML CSS jQuery
Mobile Friendly Navigation Bar Nav Sky HTML CSS jQuery CodingTuting

Heyyyyy!!!
Have you tested the responsive design of this navbar well? It is very important to test the responsive design of our website/content.
Here is the best way to test the responsive design of the website.

Give appropriate class for another more navbar

class="nav nav-anger"

Red Responsive Navigation Bar HTML CSS jQuery
Responsive Navigation Bar Nav Anger HTML CSS jQuery CodingTuting

class="nav nav-wet"

Responsive Navbar in Green color
Responsive Navigation Bar Nav Wet HTML CSS jQuery CodingTuting

class="nav nav-coal"

Responsive Navbar with Dropdown HTML CSS jQuery
Responsive Navigation Bar Nav Coal HTML CSS jQuery CodingTuting


class="nav nav-silver"

Responsive Horizontal navigation bar Gradient
Responsive Navigation Bar Nav Silver HTML CSS jQuery CodingTuting

class="nav nav-aqua"

Create top Navigation Bar Responsive HTML CSS
Responsive Navigation Bar Nav Aqua HTML CSS jQuery CodingTuting

class="nav nav-sunny"

Yellow Gradient Responsive Navbar with Dropdown
Responsive Navigation Bar Nav Sunny HTML CSS jQuery CodingTuting

class="nav nav-lips"

Navbar in HTML CSS with Pink Gradient
Responsive Navigation Bar Nav Lips HTML CSS jQuery CodingTuting


We hope you like this all beautiful gradient navbar without using the bootstrap. If there is any bug in this tutorial please let us know in the comment.

We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please comment.

Sharing is Caring


Thanks for Reading


Hi, I'm Jignesh Panchal. I'm a Web Developer & Designer. I've started this blog to help the programmers using my experience and skills. You will get solutions and tips about Programming, Web Development etc.

Share this

Related Posts