Navbar HTML CSS – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Sat, 13 May 2023 12:40:36 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Navigation Bar in HTML CSS & JavaScript | Dark/Light Mode https://www.codingnepalweb.com/navigation-bar-in-html-css-javascript-dark-light-mode/ https://www.codingnepalweb.com/navigation-bar-in-html-css-javascript-dark-light-mode/#respond Wed, 02 Feb 2022 21:11:19 +0000 https://www.codingnepalweb.com/?p=4189 Navigation Bar in HTML CSS & JavaScript | Dark/Light Mode

Hello friend, I hope you are doing awesome. Today you will learn how to create a Responsive Navigation Menu Bar in HTML CSS & JavaScript with the Dark/Light Mode feature. The interesting in this navbar menu is, the user-selected mode will not change while the webpage refreshed of the file is reopened. There are lots of Navigation Menu Bar but this navbar has some advanced features with beautiful UI and UX design.

A navigation bar is a horizontal section that contains logo navigation links aligned at the top of the webpage. The main motive of this navigation bar is to make it easier for users to be redirected from one webpage to another.

Let’s have a quick look at the given image of our navigation menu bar. On the top side, we can see our navbar menu. On the right side, we can see a logo, and in the center some navigation links and on the left side, we can see dark light mode and a search bar toggle button. Actually, this is the light version of the navbar, and by clicking on the dark-light toggle button we can apply dark mode.

Now by watching the given video tutorial, we will watch the real demo of this navigation menu bar and all the features that I have added to the navbar.

Navigation Bar in HTML CSS & JavaScript | Dark/Light Mode

I have provided all the HTML CSS and JavaScript code that I have used to create this responsive navigation menu bar with dark and light mode. Before jumping into the source codes, you need to know some basic points out of this video tutorial.

As you have seen in the video tutorial, At first we have seen our navigation menu was aligned on the top of the webpage. In the navigation menu bar, we have seen a logo on the right side, some navigation links at the center and day-night mode, and a search bar toggle button on the left side.

Also, I have shown them how the search bar appears and disappears by clicking on the toggle button. Have you noticed? our applied mode (dark or light) did not change even I refreshed the webpage of reopened the file.

The navigation menu UI design is made by HTML and CSS and the toggle feature for the search bar and dark-light mode I have used some JavaScript code and to keep the user-selected mode (dark-light) I have used the local storage.

I hope now you can create this navigation menu bar easily, If you are feeling difficulty to created this navbar, I have provided all the HTML CSS, and JavaScript code of this navigation bar below;

You Might Like This:

Navigation Menu Bar [Source Code]

To get the following HTML CSS & JavaScript code for Navigation Bar with Dark/Light Mode features. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ===== CSS ===== -->
    <link rel="stylesheet" href="style.css">
        
    <!-- ===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>

     <title>Responsive Navigation Menu Bar</title>
</head>
<body>
    <nav>
        <div class="nav-bar">
            <i class='bx bx-menu sidebarOpen' ></i>
            <span class="logo navLogo"><a href="#">CodingLab</a></span>

            <div class="menu">
                <div class="logo-toggle">
                    <span class="logo"><a href="#">CodingLab</a></span>
                    <i class='bx bx-x siderbarClose'></i>
                </div>

                <ul class="nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>

            <div class="darkLight-searchBox">
                <div class="dark-light">
                    <i class='bx bx-moon moon'></i>
                    <i class='bx bx-sun sun'></i>
                </div>

                <div class="searchBox">
                   <div class="searchToggle">
                    <i class='bx bx-x cancel'></i>
                    <i class='bx bx-search search'></i>
                   </div>

                    <div class="search-field">
                        <input type="text" placeholder="Search...">
                        <i class='bx bx-search'></i>
                    </div>
                </div>
            </div>
        </div>
    </nav>

<script>

const body = document.querySelector("body"),
      nav = document.querySelector("nav"),
      modeToggle = document.querySelector(".dark-light"),
      searchToggle = document.querySelector(".searchToggle"),
      sidebarOpen = document.querySelector(".sidebarOpen"),
      siderbarClose = document.querySelector(".siderbarClose");

      let getMode = localStorage.getItem("mode");
          if(getMode && getMode === "dark-mode"){
            body.classList.add("dark");
          }

// js code to toggle dark and light mode
      modeToggle.addEventListener("click" , () =>{
        modeToggle.classList.toggle("active");
        body.classList.toggle("dark");

        // js code to keep user selected mode even page refresh or file reopen
        if(!body.classList.contains("dark")){
            localStorage.setItem("mode" , "light-mode");
        }else{
            localStorage.setItem("mode" , "dark-mode");
        }
      });

// js code to toggle search box
        searchToggle.addEventListener("click" , () =>{
        searchToggle.classList.toggle("active");
      });
 
      
//   js code to toggle sidebar
sidebarOpen.addEventListener("click" , () =>{
    nav.classList.add("active");
});

body.addEventListener("click" , e =>{
    let clickedElm = e.target;

    if(!clickedElm.classList.contains("sidebarOpen") && !clickedElm.classList.contains("menu")){
        nav.classList.remove("active");
    }
});

</script>

</body>
</html>

/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    transition: all 0.4s ease;;
}


/* ===== Colours ===== */
:root{
    --body-color: #E4E9F7;
    --nav-color: #4070F4;
    --side-nav: #010718;
    --text-color: #FFF;
    --search-bar: #F2F2F2;
    --search-text: #010718;
}

body{
    height: 100vh;
    background-color: var(--body-color);
}

body.dark{
    --body-color: #18191A;
    --nav-color: #242526;
    --side-nav: #242526;
    --text-color: #CCC;
    --search-bar: #242526;
}

nav{
    position: fixed;
    top: 0;
    left: 0;
    height: 70px;
    width: 100%;
    background-color: var(--nav-color);
    z-index: 100;
}

body.dark nav{
    border: 1px solid #393838;

}

nav .nav-bar{
    position: relative;
    height: 100%;
    max-width: 1000px;
    width: 100%;
    background-color: var(--nav-color);
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav .nav-bar .sidebarOpen{
    color: var(--text-color);
    font-size: 25px;
    padding: 5px;
    cursor: pointer;
    display: none;
}

nav .nav-bar .logo a{
    font-size: 25px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
}

.menu .logo-toggle{
    display: none;
}

.nav-bar .nav-links{
    display: flex;
    align-items: center;
}

.nav-bar .nav-links li{
    margin: 0 5px;
    list-style: none;
}

.nav-links li a{
    position: relative;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-color);
    text-decoration: none;
    padding: 10px;
}

.nav-links li a::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: var(--text-color);
    opacity: 0;
    transition: all 0.3s ease;
}

.nav-links li:hover a::before{
    opacity: 1;
}

.nav-bar .darkLight-searchBox{
    display: flex;
    align-items: center;
}

.darkLight-searchBox .dark-light,
.darkLight-searchBox .searchToggle{
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
}

.dark-light i,
.searchToggle i{
    position: absolute;
    color: var(--text-color);
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dark-light i.sun{
    opacity: 0;
    pointer-events: none;
}

.dark-light.active i.sun{
    opacity: 1;
    pointer-events: auto;
}

.dark-light.active i.moon{
    opacity: 0;
    pointer-events: none;
}

.searchToggle i.cancel{
    opacity: 0;
    pointer-events: none;
}

.searchToggle.active i.cancel{
    opacity: 1;
    pointer-events: auto;
}

.searchToggle.active i.search{
    opacity: 0;
    pointer-events: none;
}

.searchBox{
    position: relative;
}

.searchBox .search-field{
    position: absolute;
    bottom: -85px;
    right: 5px;
    height: 50px;
    width: 300px;
    display: flex;
    align-items: center;
    background-color: var(--nav-color);
    padding: 3px;
    border-radius: 6px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.searchToggle.active ~ .search-field{
    bottom: -74px;
    opacity: 1;
    pointer-events: auto;
}

.search-field::before{
    content: '';
    position: absolute;
    right: 14px;
    top: -4px;
    height: 12px;
    width: 12px;
    background-color: var(--nav-color);
    transform: rotate(-45deg);
    z-index: -1;
}

.search-field input{
    height: 100%;
    width: 100%;
    padding: 0 45px 0 15px;
    outline: none;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--search-text);
    background-color: var(--search-bar);
}

body.dark .search-field input{
    color: var(--text-color);
}

.search-field i{
    position: absolute;
    color: var(--nav-color);
    right: 15px;
    font-size: 22px;
    cursor: pointer;
}

body.dark .search-field i{
    color: var(--text-color);
}

@media (max-width: 790px) {
    nav .nav-bar .sidebarOpen{
        display: block;
    }

    .menu{
        position: fixed;
        height: 100%;
        width: 320px;
        left: -100%;
        top: 0;
        padding: 20px;
        background-color: var(--side-nav);
        z-index: 100;
        transition: all 0.4s ease;
    }

    nav.active .menu{
        left: -0%;
    }

    nav.active .nav-bar .navLogo a{
        opacity: 0;
        transition: all 0.3s ease;
    }

    .menu .logo-toggle{
        display: block;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo-toggle .siderbarClose{
        color: var(--text-color);
        font-size: 24px;
        cursor: pointer;
    }

    .nav-bar .nav-links{
        flex-direction: column;
        padding-top: 30px;
    }

    .nav-links li a{
        display: block;
        margin-top: 20px;
    }
}

If you face any difficulties while creating your Responsive Navigation Bar or your code is not working as expected, you can download the source code files for this Responsive Navbar for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/navigation-bar-in-html-css-javascript-dark-light-mode/feed/ 0 Minimal Drop-down Menu Bar with Submenu using HTML & CSS https://www.codingnepalweb.com/drop-down-menu-bar-with-submenu/ https://www.codingnepalweb.com/drop-down-menu-bar-with-submenu/#comments Sat, 23 May 2020 07:01:00 +0000 https://codingnepalweb.com/2020/05/23/minimal-drop-down-menu-bar-with-submenu-using-html-css/ Minimal Drop-down Menu Bar with Submenu using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Minimal Dropdown Menu Bar with Submenu in HTML & CSS only. Previously I have shared a Minimal Navigation Menu Bar using CSS but there is no submenu or drop menu features. So now it’s time to create a Dropdown Menu.

A drop-down menu (sometimes called a pull-down menu or list) is a graphical control element designed to help visitors find specific pages, contents, or features on your website. Clicking or hovering on a top-level menu heading indicates a list of options to the dropdown menu.

At first, on the webpage, there is only a small menu bar or navbar, but when you clicked on that menu bar then the menu list is sliding down and visible. Those submenus or drop menus are hidden at first and when you clicked on their parent menu item then the drop list is shown. I’ve also added a simple hover color on the list as you can see in the image.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Minimal Drop-down Menu Bar with Submenu using HTML & CSS).

Video Tutorial of Minimal Dropdown Menu Bar or Navbar

 
If you like this Dropdown Menu Bar and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

If you’re a beginner and you have basic knowledge of HTML & CSS then you can also create this type of minimal navbar or menu. I hope after watching this video tutorial, you’ve understood what is the actual codes and concepts behind creating this type of design. You can also easily use this program on your websites and projects.

Dropdown Menu Bar using HTML & CSS [Source Codes]

To create this program (Minimal Drop-down Menu Bar with Submenu). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Animated Drop-down Menu CSS3</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   </head>
   <body>
      <nav>
         <label for="btn" class="button">Drop down
         <span class="fas fa-caret-down"></span>
         </label>
         <input type="checkbox" id="btn">
         <ul class="menu">
            <li><a href="#">Home</a></li>
            <li>
               <label for="btn-2" class="first">Features
               <span class="fas fa-caret-down"></span>
               </label>
               <input type="checkbox" id="btn-2">
               <ul>
                  <li><a href="#">Pages</a></li>
               </ul>
            </li>
            <li>
               <label for="btn-3" class="second">Services
               <span class="fas fa-caret-down"></span>
               </label>
               <input type="checkbox" id="btn-3">
               <ul>
                  <li><a href="#">Web Design</a></li>
                  <li><a href="#">App Design</a></li>
               </ul>
            </li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Feedback</a></li>
         </ul>
      </nav>
      <!-- This code used to rotate drop icon(-180deg).. -->
      <script>
         $('nav .button').click(function(){
           $('nav .button span').toggleClass("rotate");
         });
           $('nav ul li .first').click(function(){
             $('nav ul li .first span').toggleClass("rotate");
           });
           $('nav ul li .second').click(function(){
             $('nav ul li .second span').toggleClass("rotate");
           });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  font-family: 'Poppins', sans-serif;
}
nav{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1b1b1b;
  width: 400px;
  line-height: 40px;
  padding: 8px 25px;
  border-radius: 5px;
}
nav label{
  color: white;
  font-size: 22px;
  font-weight: 500;
  display: block;
  cursor: pointer;
}
.button span{
  float: right;
  line-height: 40px;
  transition: 0.5s;
}
.button span.rotate{
  transform: rotate(-180deg);
}
nav ul{
  position: absolute;
  background: #1b1b1b;
  list-style: none;
  top: 75px;
  left: 0;
  width: 100%;
  border-radius: 5px;
  display: none;
}
[id^=btn]:checked + ul{
  display: block;
}
nav .menu:before{
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  background: #1b1b1b;
  right: 20px;
  top: -10px;
  transform: rotate(45deg);
  z-index: -1;
}
nav ul li{
  line-height: 40px;
  padding: 8px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
nav ul li label{
  font-size: 18px;
}
nav ul li a{
  color: white;
  text-decoration: none;
  font-size: 18px;
  display: block;
}
nav ul li a:hover,
nav ul li label:hover{
  color: cyan;
}
nav ul ul{
  position: static;
}
nav ul ul li{
  line-height: 30px;
  padding-left: 30px;
  border-bottom: none;
}
nav ul ul li a{
  color: #e6e6e6;
  font-size: 17px;
}
nav ul li span{
  font-size: 20px;
  float: right;
  margin-top: 10px;
  padding: 0 10px;
  transition: 0.5s;
}
nav ul li span.rotate{
  transform: rotate(-180deg);
}
input{
  display: none;
}

That’s all, now you’ve successfully created a Minimal Drop-down Menu Bar with Submenu using HTML & CSS. If your code not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/drop-down-menu-bar-with-submenu/feed/ 5 Responsive Navigation Menu Bar using CSS Flexbox https://www.codingnepalweb.com/responsive-navigation-menu-bar-css-flexbox/ https://www.codingnepalweb.com/responsive-navigation-menu-bar-css-flexbox/#comments Sat, 09 May 2020 08:19:00 +0000 https://codingnepalweb.com/2020/05/09/responsive-navigation-menu-bar-using-css-flexbox/ Responsive Navigation Menu Bar using CSS Flexbox

Hello readers, Today in this blog you’ll learn how to create a Fully Responsive Navigation Menu Bar in HTML & CSS using Flexbox. Earlier I have shared also a Responsive Navbar using HTML & CSS without using Flexbox, now it’s time to create a Responsive Navbar using CSS Flexbox.

A website navigation bar is most commonly displayed as a plane/horizontal list of links at the top of each page. It may be below the header or logo, but it is always located before the main content of the page.

As you can see in the image, this is a fully responsive navbar using HTML & CSS (Flexbox). When you resize or minimize your PC window, this navbar automatically takes their height and width according to the window width and height.

In the PC version, this navbar menu is shown in horizontal shape but in the mobile version, this navbar menu is shown in vertical shape. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Navigation Menu Bar).

Video Tutorial of Responsive Navbar using CSS Flexbox

 
If you are a beginner, you can also create this program (Responsive Navigation Menu Bar). You can use this navbar in your projects, websites, and wherever you want. If you have basic knowledge of HTML & CSS, you can take this navbar at the next level with your creativity.

If you want to get the source code of this responsive navbar with flexbox. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Responsive Menu Bar using HTML & CSS [Source Codes]

To create this program (Responsive Navigation Menu Bar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<head>
   <meta charset="utf-8">
   <title>Responsive Navigation Bar</title>
   <link rel="stylesheet" href="style.css">
   <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <nav>
      <ul>
         <li class="logo">CodingNepal</li>
         <li class="items"><a href="#">Home</a></li>
         <li class="items"><a href="#">About</a></li>
         <li class="items"><a href="#">Blogs</a></li>
         <li class="items"><a href="#">Contact</a></li>
         <li class="items"><a href="#">Feedback</a></li>
         <li class="btn"><a href="#"><i class="fas fa-bars"></i></a></li>
      </ul>
   </nav>
   <script>
      $(document).ready(function(){
        $('.btn').click(function(){
          $('.items').toggleClass("show");
          $('ul li').toggleClass("hide");
        });
      });
   </script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat',sans-serif;
}
nav{
  background: #151515;
  padding: 5px 40px;
}
nav ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
nav ul li{
  padding: 15px 0;
  cursor: pointer;
}
nav ul li.items{
  position: relative;
  width: auto;
  margin: 0 16px;
  text-align: center;
  order: 3;
}
nav ul li.items:after{
  position: absolute;
  content: '';
  left: 0;
  bottom: 5px;
  height: 2px;
  width: 100%;
  background: #33ffff;
  opacity: 0;
  transition: all 0.2s linear;
}
nav ul li.items:hover:after{
  opacity: 1;
  bottom: 8px;
}
nav ul li.logo{
  flex: 1;
  color: white;
  font-size: 23px;
  font-weight: 600;
  cursor: default;
  user-select: none;
}
nav ul li a{
  color: white;
  font-size: 18px;
  text-decoration: none;
  transition: .4s;
}
nav ul li:hover a{
  color: cyan;
}
nav ul li i{
  font-size: 23px;
}
nav ul li.btn{
  display: none;
}
nav ul li.btn.hide i:before{
  content: '\f00d';
}
@media all and (max-width: 900px){
  nav{
    padding: 5px 30px;
  }
  nav ul li.items{
    width: 100%;
    display: none;
  }
  nav ul li.items.show{
    display: block;
  }
  nav ul li.btn{
    display: block;
  }
  nav ul li.items:hover{
    border-radius: 5px;
    box-shadow: inset 0 0 5px #33ffff,
                inset 0 0 10px #66ffff;
  }
  nav ul li.items:hover:after{
    opacity: 0;
  }
}

That’s all, now you’ve successfully created a Responsive Navigation Menu Bar using CSS Flexbox. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/responsive-navigation-menu-bar-css-flexbox/feed/ 6 Responsive Navbar with Search Box using HTML CSS https://www.codingnepalweb.com/responsive-navbar-with-search-box-html-css/ https://www.codingnepalweb.com/responsive-navbar-with-search-box-html-css/#respond Sun, 26 Apr 2020 08:14:00 +0000 https://codingnepalweb.com/2020/04/26/responsive-navbar-with-search-box-using-html-css/ Responsive Navbar with Search Box using HTML CSS

Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Responsive Navbar with Search Box using HTML CSS. Nowadays most peoples prefer a Responsive Navbar with Searchbox because users can easily get their information via search.

As you can see in the image, this is a Responsive Navbar with Searchbox. There are some icons, texts, and one search box This is a fully Responsive Navbar with HTML and CSS. When you open this Navbar on mobile devices, it’ll automatically adjust its height and width according to the device’s height and width.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Responsive Navbar with Search Box).

Video Tutorial of Responsive Navbar with Search Box

 
I hope now your doubts are clear. If you have any questions about this video you can easily comment down below. As you know this is a Fully Responsive Navbar with Searchbox using HTML & CSS. And, the CSS @media property is used to make this Navbar responsive.

If you like this program (Responsive Navbar with Search Box) and want to get source codes for this design, you can easily get all codes from the download link which is given below.

Responsive Navbar with Search Box [Source Codes]

To create this program (Responsive Navbar with Search Box). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <!-- <title>Responsive Navbar with Searchbox</title> -->
      <link rel="stylesheet" href="style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   </head>
   <body>
      <nav>
         <ul>
            <li class="logo">CodingNepal</li>
            <li class="btn"><span class="fas fa-bars"></span></li>
            <div class="items">
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">Contact</a></li>
            </div>
            <li class="search-icon">
               <input type="search" placeholder="Search">
               <label class="icon">
               <span class="fas fa-search"></span>
               </label>
            </li>
         </ul>
      </nav>
      <div class="content">
         <div class="text">
            Responsive Navbar with Searchbox
         </div>
         <div class="p">
            HTML and CSS (Flexbox) Full video tutorial
         </div>
      </div>
      <script>
         $('nav ul li.btn span').click(function(){
           $('nav ul div.items').toggleClass("show");
           $('nav ul li.btn span').toggleClass("show");
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  color: #f2f2f2;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
nav{
  background: #222222;
  padding: 10px 40px 10px 70px;
  border: 1px solid #000;
  border-left: none;
  border-right: none;
}
nav ul{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
nav ul li.logo{
  flex: 1;
  font-size: 30px;
  font-weight: 700;
}
nav ul div.items{
  padding: 0 25px;
  display: inline-flex;
}
nav ul div.items a{
  text-decoration: none;
  font-size: 18px;
  padding: 0 12px;
}
nav ul div.items a:hover{
  color: cyan;
}
nav ul .search-icon{
  height: 40px;
  width: 240px;
  display: flex;
  background: #f2f2f2;
  border-radius: 5px;
}
nav ul .search-icon input{
  height: 100%;
  width: 200px;
  border: none;
  outline: none;
  padding: 0 10px;
  color: #000;
  font-size: 16px;
  border-radius: 5px 0 0 5px;
}
nav ul .search-icon .icon{
  height: 100%;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
nav ul .search-icon .icon:hover{
  background: #e6e6e6;
}
nav ul .search-icon .icon span{
  color: #222222;
  font-size: 18px;
}
nav ul li.btn{
  font-size: 29px;
  flex: 1;
  padding: 0 40px;
  display: none;
}
nav ul li.btn span{
  height: 42px;
  width: 42px;
  text-align: center;
  line-height: 42px;
  border: 1px solid #151515;
  border-radius: 5px;
  cursor: pointer;
}
nav ul li.btn span.show:before{
  content: '\f00d';
}
@media screen and (max-width: 1052px) {
  nav{
    padding: 10px 40px 10px 0px;
  }
  nav ul li.logo{
    display: none;
  }
  nav ul div.items{
    flex: 4;
  }
}
@media screen and (max-width: 800px){
  nav ul li.btn{
    display: block;
  }
  nav{
    z-index: 1;
    padding: 9px 40px 9px 0;
  }
  nav ul div.items{
    z-index: -1;
    position: fixed;
    top: -220px;
    right: 0;
    width: 100%;
    background: #222222;
    display: inline-block;
    transition: top .4s;
  }
  nav ul div.items.show{
    top: 60px;
  }
  nav ul div.items li{
    text-align: center;
    line-height: 30px;
    margin: 30px 0;
  }
  nav ul div.items li a{
    font-size: 19px;
  }
}
@media screen and (max-width: 405px) {
  nav ul{
    flex-wrap: nowrap;
  }
  nav ul li.search{
    width: 50vmin;
  }
  nav ul li input{
    width: 40vmin;
  }
  nav ul li .search-icon{
    width: 10vmin;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  padding: 0 40px;
  z-index: -2;
}
.content .text{
  font-size: 40px;
  font-weight: 800;
  padding: 5px 0;
  color: #202020;
}
.content .p{
  font-size: 28px;
  font-weight: 600;
  color: #202020;
}

That’s all, now you’ve successfully created a Responsive Navbar with Search Box using HTML CSS. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]> https://www.codingnepalweb.com/responsive-navbar-with-search-box-html-css/feed/ 0