Responsive Navigation Bar – CodingNepal

Create Hoverable Sidebar Menu in HTML CSS and JavaScript

CodingNepal — Fri, 02 Jun 2023 08:37:20 +0000

With the dynamic nature of websites on the internet, the type, user interface, and user experience design of the sidebar menu are constantly evolving. One noticeable trend is the emergence of sidebar menus that expand and collapse upon mouse hover.

Hoverable sidebar menus are a specific kind of sidebar that occupies minimal space on a webpage, initially appearing as small icons. But, upon hovering over them, they expand and reveal their complete content.

In this blog post, I will provide a step-by-step guide on creating a responsive hoverable sidebar menu using HTML, CSS, and JavaScript. To enhance the user experience, the sidebar will have a lock icon at the top, allowing users to easily enable or disable the hoverable feature on the menu.

I highly recommend watching the comprehensive video tutorial below, which provides a step-by-step guide for creating a hoverable sidebar menu. This video tutorial will assist you in understanding and implementing the hoverable sidebar menu effectively.

Hoverable Sidebar Menu in HTML CSS & JavaScript

In this video tutorial, I have constructed a hoverable sidebar menu using HTML, CSS, and JavaScript. My goal was to provide a clear and step-by-step explanation of how to create a sidebar menu.

If you prefer not to watch the provided video tutorial, you can continue reading the article to learn how to create this sidebar menu on your own.

Steps For Creating Sidebar Menu in HTML and CSS

To create a hoverable Sidebar Menu using HTML CSS and JavaScript follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file: These codes include all the necessary CDN links and HTML sidebar layout.




  
    
    
    
    Hoverable Sidebar Menu HTML CSS & JavaScript
    
    
    
    
  
  
    
      
        
          
        
        CodingNepal
        
        
      

      
        
          
            
              Dashboard
              
            
            
              
                
                Overview
              
            
            
              
                
                All Projects
              
            
          

          
            
              Editor
              
            
            
              
                
                Magic Build
              
            
            
              
                
                New Projects
              
            
            
              
                
                Upload New
              
            
          

          
            
              Setting
              
            
            
              
                
                Notice Board
              
            
            
              
                
                Award
              
            
            
              
                
                Setting
              
            
          
        

        
          
            
          
          
            David Oliva
            david@gmail.com

Next, include the following CSS code in your style.css file to implement styling to the elements and employ media queries for ensuring responsiveness on various screen sizes. You can modify this code according to your preferences by adjusting properties such as color, font, size, and other CSS attributes to achieve your desired design.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  background: #eef5fe;
}
/* Pre css */
.flex {
  display: flex;
  align-items: center;
}
.nav_image {
  display: flex;
  min-width: 55px;
  justify-content: center;
}
.nav_image img {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  object-fit: cover;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 270px;
  background: #fff;
  padding: 15px 10px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}
.sidebar.close {
  width: calc(55px + 20px);
}
.logo_items {
  gap: 8px;
}
.logo_name {
  font-size: 22px;
  color: #333;
  font-weight: 500px;
  transition: all 0.3s ease;
}
.sidebar.close .logo_name,
.sidebar.close #lock-icon,
.sidebar.close #sidebar-close {
  opacity: 0;
  pointer-events: none;
}
#lock-icon,
#sidebar-close {
  padding: 10px;
  color: #4070f4;
  font-size: 25px;
  cursor: pointer;
  margin-left: -4px;
  transition: all 0.3s ease;
}
#sidebar-close {
  display: none;
  color: #333;
}
.menu_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 40px;
  overflow-y: auto;
  height: calc(100% - 82px);
}
.menu_container::-webkit-scrollbar {
  display: none;
}
.menu_title {
  position: relative;
  height: 50px;
  width: 55px;
}
.menu_title .title {
  margin-left: 15px;
  transition: all 0.3s ease;
}
.sidebar.close .title {
  opacity: 0;
}
.menu_title .line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  width: 20px;
  border-radius: 25px;
  background: #aaa;
  transition: all 0.3s ease;
}
.menu_title .line {
  opacity: 0;
}
.sidebar.close .line {
  opacity: 1;
}
.item {
  list-style: none;
}
.link {
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #707070;
}
.link:hover {
  color: #fff;
  background-color: #4070f4;
}
.link span {
  white-space: nowrap;
}
.link i {
  height: 50px;
  min-width: 55px;
  display: flex;
  font-size: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.sidebar_profile {
  padding-top: 15px;
  margin-top: 15px;
  gap: 15px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}
.sidebar_profile .name {
  font-size: 18px;
  color: #333;
}
.sidebar_profile .email {
  font-size: 15px;
  color: #333;
}

/* Navbar */
.navbar {
  max-width: 500px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 60%;
  transform: translateX(-50%);
  background: #fff;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  justify-content: space-between;
}
#sidebar-open {
  font-size: 30px;
  color: #333;
  cursor: pointer;
  margin-right: 20px;
  display: none;
}
.search_box {
  height: 46px;
  max-width: 500px;
  width: 100%;
  border: 1px solid #aaa;
  outline: none;
  border-radius: 8px;
  padding: 0 15px;
  font-size: 18px;
  color: #333;
}
.navbar img {
  height: 40px;
  width: 40px;
  margin-left: 20px;
}

/* Responsive */
@media screen and (max-width: 1100px) {
  .navbar {
    left: 65%;
  }
}
@media screen and (max-width: 800px) {
  .sidebar {
    left: 0;
    z-index: 1000;
  }
  .sidebar.close {
    left: -100%;
  }
  #sidebar-close {
    display: block;
  }
  #lock-icon {
    display: none;
  }
  .navbar {
    left: 0;
    max-width: 100%;
    transform: translateX(0%);
  }
  #sidebar-open {
    display: block;
  }
}

Lastly, added the provided JavaScript code to your script.js file to enable the functionality of expanding and collapsing the sidebar on mouse hover.

// Selecting the sidebar and buttons
const sidebar = document.querySelector(".sidebar");
const sidebarOpenBtn = document.querySelector("#sidebar-open");
const sidebarCloseBtn = document.querySelector("#sidebar-close");
const sidebarLockBtn = document.querySelector("#lock-icon");

// Function to toggle the lock state of the sidebar
const toggleLock = () => {
  sidebar.classList.toggle("locked");
  // If the sidebar is not locked
  if (!sidebar.classList.contains("locked")) {
    sidebar.classList.add("hoverable");
    sidebarLockBtn.classList.replace("bx-lock-alt", "bx-lock-open-alt");
  } else {
    sidebar.classList.remove("hoverable");
    sidebarLockBtn.classList.replace("bx-lock-open-alt", "bx-lock-alt");
  }
};

// Function to hide the sidebar when the mouse leaves
const hideSidebar = () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.add("close");
  }
};

// Function to show the sidebar when the mouse enter
const showSidebar = () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.remove("close");
  }
};

// Function to show and hide the sidebar
const toggleSidebar = () => {
  sidebar.classList.toggle("close");
};

// If the window width is less than 800px, close the sidebar and remove hoverability and lock
if (window.innerWidth < 800) {
  sidebar.classList.add("close");
  sidebar.classList.remove("locked");
  sidebar.classList.remove("hoverable");
}

// Adding event listeners to buttons and sidebar for the corresponding actions
sidebarLockBtn.addEventListener("click", toggleLock);
sidebar.addEventListener("mouseleave", hideSidebar);
sidebar.addEventListener("mouseenter", showSidebar);
sidebarOpenBtn.addEventListener("click", toggleSidebar);
sidebarCloseBtn.addEventListener("click", toggleSidebar);

Conclusion and Final Words

In conclusion, learning how to create a responsive hoverable sidebar menu using HTML, CSS, and JavaScript enhances your web development skills and provides insight into the process of building a custom website’s sidebars. By following the instructions provided, I hope that you have successfully created an appealing and functional Side Navigation Menu Bar.

Additionally, on this website, you’ll find a wide range of Sidebar Menu Templates, including options for business websites, portfolio websites, and more. These templates are built using HTML, CSS, and JavaScript. It’s a great opportunity for you to explore and try recreating them, allowing you to enhance your web development skills even further.

If you encounter any difficulties while creating your own hoverable sidebar menu or your code is not working as expected, you can download the source code files for this sidebar menu for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Responsive Side Navigation Bar in HTML CSS and JavaScript

CodingNepal — Mon, 22 May 2023 09:41:10 +0000

If you’re unfamiliar, a sidebar is a section positioned along one side of a website, typically containing navigation links or widgets. The sidebar is used to provide convenient access to different pages and enhance the overall user’s navigation.

In this blog post, you will learn how to create a responsive side navigation bar with submenus using HTML, CSS, and JavaScript. This sidebar includes many features like submenus, a dark or light theme mode, and other things that ensure a visually appealing and customizable user experience.

But that’s not all! You’ll also learn to create a top navigation menu. This menu includes useful elements like a search box, a user profile icon, and a theme switcher. Overall, with all these features, this sidebar is fully responsive, meaning it works perfectly on both large devices and phones.

So, whether you are a beginner or have some experience in web development, this tutorial provides step-by-step instructions and code snippets to help you better understand the creation of both the sidebar and the top navigation menu.

Steps to Create a Side Navigation Bar in HTML CSS JS

To create a Responsive Side Navigation Bar using HTML, CSS, and JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic layout for the Side Navigation Bar. This code includes all the HTML for the Sidebar and top Navigation Bar.




  
    
    
    
    
    Side Navigation Bar in HTML CSS JavaScript
    
  
  
    
    
      
        
        CodingNepal
      

      
        
      

      
        
        
        
        
      
    

    
    
      
        
          
          
          
          
            
              
                
              
              Home
              
            

            
              Nav Sub Link
              Nav Sub Link
              Nav Sub Link
              Nav Sub Link
            
          
          

          
          
          
            
              
                
              
              Overview
              
            

            
              Nav Sub Link
              Nav Sub Link
              Nav Sub Link
              Nav Sub Link
            
          
          
        

        
          
          
          
          
            
              
                
              
              Magic build
            
          
          

          
            
              
                
              
              Filters
            
          
          
            
              
                
              
              Filter
            
          
          
            
              
                
              
              Upload new
            
          
        
        
          
          
            
              
                
              
              Notice board
            
          
          
            
              
                
              
              Award
            
          
          
            
              
                
              
              Setting
            
          
          
            
              
                
              
              Features
            
          
        

        
        
          
             Expand
            
          
          
             Collapse

Next, add the following CSS codes to your style.css file to style Sidebar and Navigation Bar. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties. Upon adding these styles, the Sidebar will initially be visible in the browser.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
:root {
  --white-color: #fff;
  --blue-color: #4070f4;
  --grey-color: #707070;
  --grey-color-light: #aaa;
}
body {
  background-color: #e7f2fd;
  transition: all 0.5s ease;
}
body.dark {
  background-color: #333;
}
body.dark {
  --white-color: #333;
  --blue-color: #fff;
  --grey-color: #f2f2f2;
  --grey-color-light: #aaa;
}

/* navbar */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  background-color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px;
  z-index: 1000;
  box-shadow: 0 0 2px var(--grey-color-light);
}
.logo_item {
  display: flex;
  align-items: center;
  column-gap: 10px;
  font-size: 22px;
  font-weight: 500;
  color: var(--blue-color);
}
.navbar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.search_bar {
  height: 47px;
  max-width: 430px;
  width: 100%;
}
.search_bar input {
  height: 100%;
  width: 100%;
  border-radius: 25px;
  font-size: 18px;
  outline: none;
  background-color: var(--white-color);
  color: var(--grey-color);
  border: 1px solid var(--grey-color-light);
  padding: 0 20px;
}
.navbar_content {
  display: flex;
  align-items: center;
  column-gap: 25px;
}
.navbar_content i {
  cursor: pointer;
  font-size: 20px;
  color: var(--grey-color);
}

/* sidebar */
.sidebar {
  background-color: var(--white-color);
  width: 260px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  padding: 80px 20px;
  z-index: 100;
  overflow-y: scroll;
  box-shadow: 0 0 1px var(--grey-color-light);
  transition: all 0.5s ease;
}
.sidebar.close {
  padding: 60px 0;
  width: 80px;
}
.sidebar::-webkit-scrollbar {
  display: none;
}
.menu_content {
  position: relative;
}
.menu_title {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 18px;
}
.sidebar.close .menu_title {
  padding: 6px 30px;
}
.menu_title::before {
  color: var(--grey-color);
  white-space: nowrap;
}
.menu_dahsboard::before {
  content: "Dashboard";
}
.menu_editor::before {
  content: "Editor";
}
.menu_setting::before {
  content: "Setting";
}
.sidebar.close .menu_title::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 18px;
  border-radius: 12px;
  background: var(--grey-color-light);
}
.menu_items {
  padding: 0;
  list-style: none;
}
.navlink_icon {
  position: relative;
  font-size: 22px;
  min-width: 50px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  border-radius: 6px;
}
.navlink_icon::before {
  content: "";
  position: absolute;
  height: 100%;
  width: calc(100% + 100px);
  left: -20px;
}
.navlink_icon:hover {
  background: var(--blue-color);
}
.sidebar .nav_link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 15px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--grey-color);
  white-space: nowrap;
}
.sidebar.close .navlink {
  display: none;
}
.nav_link:hover {
  color: var(--white-color);
  background: var(--blue-color);
}
.sidebar.close .nav_link:hover {
  background: var(--white-color);
}
.submenu_item {
  cursor: pointer;
}
.submenu {
  display: none;
}
.submenu_item .arrow-left {
  position: absolute;
  right: 10px;
  display: inline-block;
  margin-right: auto;
}
.sidebar.close .submenu {
  display: none;
}
.show_submenu ~ .submenu {
  display: block;
}
.show_submenu .arrow-left {
  transform: rotate(90deg);
}
.submenu .sublink {
  padding: 15px 15px 15px 52px;
}
.bottom_content {
  position: fixed;
  bottom: 60px;
  left: 0;
  width: 260px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.bottom {
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  justify-content: space-around;
  padding: 18px 0;
  text-align: center;
  width: 100%;
  color: var(--grey-color);
  border-top: 1px solid var(--grey-color-light);
  background-color: var(--white-color);
}
.bottom i {
  font-size: 20px;
}
.bottom span {
  font-size: 18px;
}
.sidebar.close .bottom_content {
  width: 50px;
  left: 15px;
}
.sidebar.close .bottom span {
  display: none;
}
.sidebar.hoverable .collapse_sidebar {
  display: none;
}
#sidebarOpen {
  display: none;
}
@media screen and (max-width: 768px) {
  #sidebarOpen {
    font-size: 25px;
    display: block;
    margin-right: 10px;
    cursor: pointer;
    color: var(--grey-color);
  }
  .sidebar.close {
    left: -100%;
  }
  .search_bar {
    display: none;
  }
  .sidebar.close .bottom_content {
    left: -100%;
  }
}

Finally, add the following JavaScript code to your script.js file to add the functionality of show/hide to the side navigation bar and toggle between dark and light themes on the theme switcher click.

const body = document.querySelector("body");
const darkLight = document.querySelector("#darkLight");
const sidebar = document.querySelector(".sidebar");
const submenuItems = document.querySelectorAll(".submenu_item");
const sidebarOpen = document.querySelector("#sidebarOpen");
const sidebarClose = document.querySelector(".collapse_sidebar");
const sidebarExpand = document.querySelector(".expand_sidebar");
sidebarOpen.addEventListener("click", () => sidebar.classList.toggle("close"));

sidebarClose.addEventListener("click", () => {
  sidebar.classList.add("close", "hoverable");
});
sidebarExpand.addEventListener("click", () => {
  sidebar.classList.remove("close", "hoverable");
});

sidebar.addEventListener("mouseenter", () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.remove("close");
  }
});
sidebar.addEventListener("mouseleave", () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.add("close");
  }
});

darkLight.addEventListener("click", () => {
  body.classList.toggle("dark");
  if (body.classList.contains("dark")) {
    document.setI
    darkLight.classList.replace("bx-sun", "bx-moon");
  } else {
    darkLight.classList.replace("bx-moon", "bx-sun");
  }
});

submenuItems.forEach((item, index) => {
  item.addEventListener("click", () => {
    item.classList.toggle("show_submenu");
    submenuItems.forEach((item2, index2) => {
      if (index !== index2) {
        item2.classList.remove("show_submenu");
      }
    });
  });
});

if (window.innerWidth < 768) {
  sidebar.classList.add("close");
} else {
  sidebar.classList.remove("close");
}

To summarize, we began by creating a simple HTML structure for the Sidebar and Navigation in an HTML file. Next, we used CSS to style the Sidebar and Navigation Bar. Finally, we used JavaScript to enable the show/hide functionality of the Side Navbar and added the functionality to switch between dark and light modes.

Conclusion and Final Words

In conclusion, by following the step-by-step instructions and the provided code snippets, you have learned how to create a responsive Sidebar and Navigation Menu Bar with all useful features.

To further enhance your web development skills, I highly recommend experimenting with various types of sidebar menus and navigation bars. There are many resources available on this website that can help you learn more about web development.

If you encounter any difficulties while creating your Side Navigation Bar or your code is not working as expected, you can download the source code files for this Sidebar for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Create Responsive Navigation Bar in HTML CSS & JavaScript

CodingNepal — Sun, 27 Nov 2022 21:11:21 +0000

For both users and the website’s creator, the Navigation Bar has emerged as its most crucial element. Did you know that even the most crucial elements of a website may be created using simple HTML, CSS, and JavaScript code?

If you’re looking for a responsive navigation bar with a search box then you are in right place. Even if you only know the fundamentals of HTML and CSS, then also you will be able to make a navigation bar. Recently I have provided the Top 10 Best CSS Animations I hope that blog will also help you to boost your CSS skills.

A navigation bar is a section that is located at the top of a website and contains the logo, essential navigation links, and other items as needed for the website’s functionality. In essence, navigation facilitates user flow from one page to another.

Take a brief look at the picture of our navigation menu bar. You can see that I tried to present a general idea of the Navigation Bar there. As you can see, this navigation bar will also have a search bar with a responsive feature.

The demonstration of this Navigation Bar is now available in the provided video instruction. You should try to design this navigation menu step-by-step by following the instructions in the provided video tutorial. This will make the process easier for you.

Navigation Bar in HTML CSS & JS | Video Tutorial

In the video tutorial for this responsive navigation bar, as you have seen. The top of the page had a navigation bar. The menu bar featured a logo, a few links, and a search bar. A search bar emerged when I clicked the search symbol, and all of the navigation links vanished. I’ve also demonstrated the complete responsiveness of this navigation.

I believe, now you can make this Navigation Bar in HTML CSS & JavaScript without using bootstrap. If you are feeling difficulty creating this Navigation Menu then I have provided all the source codes that I used to create it.

Navigation Bar HTML CSS & JS [Source Code]

To create Navigation Bar HTML CSS & JS, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Navigation Bar HTML CSS & JavaScript by clicking on the given download button.

First, paste the following codes into your index.html file.




  
    
    
    
    Navigation Bar with Search Box
    
    
    
   
  
  
    
      
      CodingLab

      
        
        Home
        Services
        Products
        About Us
        Contact Us

Second, paste the following codes into your style.css file.

/* Google Fonts - 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;
}
body {
  background: #f0faff;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 200px;
  background: #4a98f7;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.nav,
.nav .nav-links {
  display: flex;
  align-items: center;
}
.nav {
  justify-content: space-between;
}
a {
  color: #fff;
  text-decoration: none;
}
.nav .logo {
  font-size: 22px;
  font-weight: 500;
}
.nav .nav-links {
  column-gap: 20px;
  list-style: none;
}
.nav .nav-links a {
  transition: all 0.2s linear;
}
.nav.openSearch .nav-links a {
  opacity: 0;
  pointer-events: none;
}
.nav .search-icon {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.nav .search-box {
  position: absolute;
  right: 250px;
  height: 45px;
  max-width: 555px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s linear;
}
.nav.openSearch .search-box {
  opacity: 1;
  pointer-events: auto;
}
.search-box .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  left: 15px;
  color: #4a98f7;
  transform: translateY(-50%);
}
.search-box input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 6px;
  background-color: #fff;
  padding: 0 15px 0 45px;
}

.nav .navOpenBtn,
.nav .navCloseBtn {
  display: none;
}

/* responsive */
@media screen and (max-width: 1160px) {
  .nav {
    padding: 15px 100px;
  }
  .nav .search-box {
    right: 150px;
  }
}
@media screen and (max-width: 950px) {
  .nav {
    padding: 15px 50px;
  }
  .nav .search-box {
    right: 100px;
    max-width: 400px;
  }
}
@media screen and (max-width: 768px) {
  .nav .navOpenBtn,
  .nav .navCloseBtn {
    display: block;
  }
  .nav {
    padding: 15px 20px;
  }
  .nav .nav-links {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    max-width: 280px;
    width: 100%;
    padding-top: 100px;
    row-gap: 30px;
    flex-direction: column;
    background-color: #11101d;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    z-index: 100;
  }
  .nav.openNav .nav-links {
    left: 0;
  }
  .nav .navOpenBtn {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  .nav .navCloseBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  .nav .search-box {
    top: calc(100% + 10px);
    max-width: calc(100% - 20px);
    right: 50%;
    transform: translateX(50%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
}

Third, paste the following codes into your script.js file.

const nav = document.querySelector(".nav"),
  searchIcon = document.querySelector("#searchIcon"),
  navOpenBtn = document.querySelector(".navOpenBtn"),
  navCloseBtn = document.querySelector(".navCloseBtn");

searchIcon.addEventListener("click", () => {
  nav.classList.toggle("openSearch");
  nav.classList.remove("openNav");
  if (nav.classList.contains("openSearch")) {
    return searchIcon.classList.replace("uil-search", "uil-times");
  }
  searchIcon.classList.replace("uil-times", "uil-search");
});

navOpenBtn.addEventListener("click", () => {
  nav.classList.add("openNav");
  nav.classList.remove("openSearch");
  searchIcon.classList.replace("uil-times", "uil-search");
});
navCloseBtn.addEventListener("click", () => {
  nav.classList.remove("openNav");
});

If you face any difficulties while creating your Navigation Menu Bar or your code is not working as expected, you can download the source code files for this Navbar Menu 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.

View Live Demo

Sticky Navigation Bar in HTML CSS and JavaScript | With Source Code

CodingNepal — Mon, 09 Aug 2021 21:11:18 +0000

Hello, my friend, I hope you all are doing well. Today we are going to create something that mostly uses on the website and is important for the website, that is Sticky Navigation Bar in HTML CSS and JavaScript. I have created many types of Navigation Menu but to date, I haven’t built any sticky navbar on scroll. Without doing ado let’s get started.

Sticky navigation on scroll means the animation on the navigation bar that is stuck on the top of the webpage while the page scrolls to the upside. A sticky navbar makes the website more attractive and easy to jump from one webpage to another.

The image I have uploaded on the webpage is the real example that we are going to develop. The navigation that you can see on the image is the looks after page scroll to the upside. But if the page does not scroll and stays in the initial condition then we will see a different appearance on this navigation menu bar.

Let’s have a look at the real example of this sticky navbar animation on the scroll from the given video tutorial also you will get all the ideas of how all codes are working in the program perfectly.

Sticky Navigation Bar in HTML CSS and JavaScript

You will get all the source code files of this Sticky Navigation Bar but till then I have to covet some important points that you need to know.

As you have seen on the video tutorial of the sticky navigation. At first, we have seen only a navigation bar with a logo and some nav links without background color. When I scrolled the page the navbar’s color appears and the nav link’s hover color also changed. To make this animation and effect I have used little JavaScript code.

We can make a stuck navigation menu on the top by giving its CSS position fixed but we can’t create background color appear-disappear and change in navlinks color on hover.

Sticky Navigation Bar | Source Code

Before getting the given code of Sticky Navigation Bar, you need to create two files: an HTML file and a CSS file. After Creating these two files then you can copy-paste the following codes in your documents. You can also directly download all source code files from the given download button.

Sticky Navigation Bar | CodingLab

CodingLab.

Home
About
Skills
Services
Contact

Sticky Navigation Bar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed culpa minus ducimus nostrum aspernatur qui odit assumenda consectetur dolorum autem. Impedit aperiam nemo fuga numquam molestias sit quaerat quae doloribus est facilis ab, asperiores voluptatum dolore? Dignissimos porro corporis, veniam esse animi pariatur vitae quas est, amet minima et ratione tenetur earum officiis fugiat saepe eius nisi dolor, iusto voluptas obcaecati nam! Facere excepturi quibusdam, magni fugit quia, accusantium eum dolorum id dolores. Enim consectetur tempore distinctio, natus dolore incidunt. Repellendus ut natus, sit at inventore, reiciendis. Praesentium, tempore. Laborum consequuntur, illo voluptatem nobis rem molestias corporis laboriosam sint officiis, inventore atque, repellendus. Blanditiis molestiae minima consequuntur et accusamus illum, laboriosam placeat perferendis sed. Maiores eos laboriosam quas eius ratione dignissimos laborum doloremque, praesentium obcaecati cum consectetur magnam accusamus, esse, corporis aliquid pariatur mollitia corrupti cupiditate ipsa iure enim provident. Earum, voluptate! Similique quas veniam voluptas, maiores perspiciatis error voluptatum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima libero consequatur necessitatibus voluptatibus vel, ut asperiores magnam velit, eum veritatis natus, dolorum sit ipsum quidem laborum! Facilis officia itaque, explicabo harum illum, repellat nihil corporis! Dolor, libero vero, consequuntur sed necessitatibus corporis. Facilis autem natus animi pariatur quaerat rerum nemo quibusdam veritatis provident error nostrum ratione dolore officiis non amet, quidem dolores eaque sint blanditiis odio porro ut, quam soluta. Necessitatibus, aperiam eum doloremque voluptate qui aliquid consequatur aspernatur debitis expedita unde vitae quia officiis, delectus, possimus ratione ex rerum dignissimos maxime molestiae asperiores. Tempora recusandae debitis exercitationem quo facere reprehenderit tenetur, dolore laboriosam repellat modi. Magnam ratione iste quo perspiciatis explicabo deserunt temporibus quaerat inventore quod accusantium atque, dolores commodi nobis distinctio, fugit illum, soluta quisquam est in omnis! Recusandae incidunt voluptatem, consequuntur doloremque! Nisi incidunt, iure quidem dolores odit sint, ut quam. Ipsum, maiores doloremque velit numquam quisquam.

/* Google Font Import Link */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
  *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Ubuntu', sans-serif;
}
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  transition: all 0.4s ease;
}
nav.sticky{
  padding: 15px 20px;
  background: #4070f4;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
nav .nav-content{
  height: 100%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav .logo a{
  font-weight: 500;
  font-size: 35px;
  color: #4070f4;
}
nav.sticky .logo a{
  color: #fff;
}
.nav-content .nav-links{
  display: flex;
}
.nav-content .nav-links li{
  list-style: none;
  margin: 0 8px;
}
 .nav-links li a{
  text-decoration: none;
  color: #0E2431;
  font-size: 18px;
  font-weight: 500;
  padding: 10px 4px;
  transition: all 0.3s ease;
}
 .nav-links li a:hover{
   color: #4070f4;
 }
 nav.sticky .nav-links li a{
   color: #fff;
   transition: all 0.4s ease;
}
 nav.sticky .nav-links li a:hover{
  color: #0E2431;
}
.home{
  height: 100vh;
  width: 100%;
  background: url("images/background.png") no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Ubuntu', sans-serif;
}
h2{
  font-size: 30px;
  margin-bottom: 6px;
  color: #4070f4;
}
.text{
  text-align: justify;
  padding: 40px 80px;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
}

If you face any difficulties while creating your Responsive Sticky Navigation Bar or your code is not working as expected, you can download the source code files for this Sticky 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.

Responsive Drop Down Menu with Sub Menu in HTML & CSS | Free Source Code

CodingNepal — Mon, 24 May 2021 21:11:18 +0000

How to create a dropdown navigation bar in HTML CSS?

A: To create a responsive drop-down navigation bar with a submenu, I have provided essential codes article and video tutorial below:

Hello readers, today we will learn How to Create a Responsive Drop Down Menu with Sub Menu in HTML & CSS and a little touch of JavaScript. Earlier, I have created various blogs of Responsive Navigation Bar using HTML and CSS, but I haven’t built any drop-down navigation menu bar.

What is Drop-Down Menu?

Simply, Drop down menu means that features on the navigation bar from the sub-menu come out while clicking or by doing hover on the parent navigation links. Submenu helps to reduce space on the navigation bar that makes it easier for users to explore the things that they want from the website.

How many links should be in your main navigation and sub-menu?

You can add nav links on your main navigation menu and sub-menu as need of your website and it also depends on the width of the navigation menu bar. Normally you can add 5 to 7 nav links on the main navigation bar and 3 to 5 on the drop-down sub-menu.

What is the element you have included on the drop-down navigation bar?

As you can see on the given image of the drop-down navigation menu with sub-menu. Basically, you can add the following elements that I have added to my drop-down menu. You can add the following elements to the navigation menu.

Your Logo
Navigation Links (5 to 7) normally
Sub-menu Links (3 to 5) normally
Social Media Icons.
Sidebar Open/Close Button (Responsive)

How do I create a dropdown navigation menu with a submenu?

There are various ways to create a drop-down navigation menu. I think the following are the best and easy ways:

In HTML:

Make

tag as a parents for the main navigation links.

Inside the

tag add

tag like this

Home

Now for submenu add

tag again inside the

like this:

Home
- Sub Menu

In CSS:

ul li{position: relative}; (to main parent li tag)
ul li ul{position: absolute
top: 0;
left: 100%;
display: none};

make it visible when we hover on the parent element by giving display: block

For getting the virtual example of this responsive drop-down navigation menu with submenu and codes that I have used to build this type of navbar with submenu, I recommend you to watch the following video tutorial.

Drop Down Navigation Menu with Sub Menu | Video Tutorial

I hope, you like my navigation menu design. To create this navigation menu with the feature of drop-down sub-menu, I have used HTML5 CSS3 and a little touch of JavaScript. This is a fully responsive design. Responsive means this navigation can fit in any screen sizes devices like on big sizes computer, laptop, tablet or mobiles.

Those friends, who are feeling difficulty building responsive navbar menu with sub-menu. I have provided all source codes of the responsive drop-down menu with the sub-menu below. Rather you can copy the following coded or you can also download all files by clicking on the given download button.

Drop Down Menu with Sub Menu | Source Code

Top copy-paste the following HTML CSS and JavaScript codes you need to create two files, one is HTML file and another is CSS files on your computer you can also download files directly by clicking on the given download button.

How do you create a dropdown in HTML?

Create an HTML file with the name index.html on your computer and copy-paste the following HTML codes on your HTML document.




  
    
    Responsive Drop Down Navigation Menu | CodingLab 
    
    
    
     
   

  
    
      
      CodingLab
      
        
          CodingLab
          
        
        
          HOME
          
            HTML & CSS
            
            
              Web Design
              Login Forms
              Card Design
              
                More
                
              
                
                  Neumorphism
                  Pre-loader
                  Glassmorphism
                
              
            
          
          
            JAVASCRIPT
            
            
              Dynamic Clock
              Form Validation
              Card Slider
              Complete Website
            
          
          ABOUT US
          CONTACT US

Create a CSS file with the name style.css on your computer and copy-paste the following CSS codes on your CSS document.

/* Googlefont Poppins CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
}
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 70px;
  background: #3E8DA8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 99;
}
nav .navbar{
  height: 100%;
  max-width: 1250px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  /* background: red; */
  padding: 0 50px;
}
.navbar .logo a{
  font-size: 30px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
nav .navbar .nav-links{
  line-height: 70px;
  height: 100%;
}
nav .navbar .links{
  display: flex;
}
nav .navbar .links li{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}
nav .navbar .links li a{
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow{
  transform: rotate(180deg);
  }

nav .navbar .links li .arrow{
  /* background: red; */
  height: 100%;
  width: 22px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  color: #fff;
  transition: all 0.3s ease;
}
nav .navbar .links li .sub-menu{
  position: absolute;
  top: 70px;
  left: 0;
  line-height: 40px;
  background: #3E8DA8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}
nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu{
  display: block;
}
.navbar .links li .sub-menu li{
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.navbar .links li .sub-menu a{
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.navbar .links li .sub-menu .more-arrow{
  line-height: 40px;
}
.navbar .links li .htmlCss-more-sub-menu{
  /* line-height: 40px; */
}
.navbar .links li .sub-menu .more-sub-menu{
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}
.links li .sub-menu .more:hover .more-sub-menu{
  display: block;
}
.navbar .search-box{
  position: relative;
   height: 40px;
  width: 40px;
}
.navbar .search-box i{
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.navbar .search-box .input-box{
  position: absolute;
  right: calc(100% - 40px);
  top: 80px;
  height: 60px;
  width: 300px;
  background: #3E8DA8;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}
.navbar.showInput .search-box .input-box{
  top: 65px;
  opacity: 1;
  pointer-events: auto;
  background: #3E8DA8;
}
.search-box .input-box::before{
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: #3E8DA8;
  right: 10px;
  top: -6px;
  transform: rotate(45deg);
}
.search-box .input-box input{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  height: 35px;
  width: 280px;
  outline: none;
  padding: 0 15px;
  font-size: 16px;
  border: none;
}
.navbar .nav-links .sidebar-logo{
  display: none;
}
.navbar .bx-menu{
  display: none;
}
@media (max-width:920px) {
  nav .navbar{
    max-width: 100%;
    padding: 0 25px;
  }

  nav .navbar .logo a{
    font-size: 27px;
  }
  nav .navbar .links li{
    padding: 0 10px;
    white-space: nowrap;
  }
  nav .navbar .links li a{
    font-size: 15px;
  }
}
@media (max-width:800px){
  nav{
    /* position: relative; */
  }
  .navbar .bx-menu{
    display: block;
  }
  nav .navbar .nav-links{
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 270px;
    width: 100%;
    background:  #3E8DA8;
    line-height: 40px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 1000;
  }
  .navbar .nav-links .sidebar-logo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-logo .logo-name{
    font-size: 25px;
    color: #fff;
  }
    .sidebar-logo  i,
    .navbar .bx-menu{
      font-size: 25px;
      color: #fff;
    }
  nav .navbar .links{
    display: block;
    margin-top: 20px;
  }
  nav .navbar .links li .arrow{
    line-height: 40px;
  }
nav .navbar .links li{
    display: block;
  }
nav .navbar .links li .sub-menu{
  position: relative;
  top: 0;
  box-shadow: none;
  display: none;
}
nav .navbar .links li .sub-menu li{
  border-bottom: none;

}
.navbar .links li .sub-menu .more-sub-menu{
  display: none;
  position: relative;
  left: 0;
}
.navbar .links li .sub-menu .more-sub-menu li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow{
  transform: rotate(0deg);
  }
  .navbar .links li .sub-menu .more-sub-menu{
    display: none;
  }
  .navbar .links li .sub-menu .more span{
    /* background: red; */
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }

  .links li .sub-menu .more:hover .more-sub-menu{
    display: none;
  }
  nav .navbar .links li:hover .htmlCss-sub-menu,
  nav .navbar .links li:hover .js-sub-menu{
    display: none;
  }
.navbar .nav-links.show1 .links .htmlCss-sub-menu,
  .navbar .nav-links.show3 .links .js-sub-menu,
  .navbar .nav-links.show2 .links .more .more-sub-menu{
      display: block;
    }
    .navbar .nav-links.show1 .links .htmlcss-arrow,
    .navbar .nav-links.show3 .links .js-arrow{
        transform: rotate(180deg);
}
    .navbar .nav-links.show2 .links .more-arrow{
      transform: rotate(90deg);
    }
}
@media (max-width:370px){
  nav .navbar .nav-links{
  max-width: 100%;
} 
}

Create a JS file with the name script.js on your computer and copy-paste the following JScodes on your JS document.

// search-box open close js code
let navbar = document.querySelector(".navbar");
let searchBox = document.querySelector(".search-box .bx-search");
// let searchBoxCancel = document.querySelector(".search-box .bx-x");

searchBox.addEventListener("click", ()=>{
  navbar.classList.toggle("showInput");
  if(navbar.classList.contains("showInput")){
    searchBox.classList.replace("bx-search" ,"bx-x");
  }else {
    searchBox.classList.replace("bx-x" ,"bx-search");
  }
});

// sidebar open close js code
let navLinks = document.querySelector(".nav-links");
let menuOpenBtn = document.querySelector(".navbar .bx-menu");
let menuCloseBtn = document.querySelector(".nav-links .bx-x");
menuOpenBtn.onclick = function() {
navLinks.style.left = "0";
}
menuCloseBtn.onclick = function() {
navLinks.style.left = "-100%";
}


// sidebar submenu open close js code
let htmlcssArrow = document.querySelector(".htmlcss-arrow");
htmlcssArrow.onclick = function() {
 navLinks.classList.toggle("show1");
}
let moreArrow = document.querySelector(".more-arrow");
moreArrow.onclick = function() {
 navLinks.classList.toggle("show2");
}
let jsArrow = document.querySelector(".js-arrow");
jsArrow.onclick = function() {
 navLinks.classList.toggle("show3");
}

If you face any difficulties while creating your Dropdown Navigation Bar or your code is not working as expected, you can download the source code files for this Dropdown Navbar Menu 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.

Responsive Navigation Menu Bar HTML & CSS

CodingNepal — Sun, 15 Nov 2020 21:09:04 +0000

Q: How can we create a responsive navigation bar using HTML and CSS?

A: After reading the given article and watching the video tutorial for creating a Responsive Navigation Bar you will definitely able to create the navigation bar that i have given as an image.

Hello readers, today in this blog I’m going to create a Responsive Navigation Menu Bar By using only HTML & CSS. In a previous blog, I have shared How to Create a Sidebar Menu without using JavaScript and now I’m going to create a responsive navbar.

What is Navigation Menu Bar?

Basically, the Navigation menu is a horizontal bar where one logo and some hyperlinks exist. It is the most important program on the webpage. The main purpose of navigation bar is to directly redirect into the web pages by clicking on the hyperlinks as they want. Another main purpose of the navogation bar is to make the user’s works convenient and easier. The navigation bar should be perfectly fit in all screen devices.

As you can clearly look at the given image of this program Navbar Menu. On the top side, there is one horizontal bar. On the right side, there is one logo, and on the left side, there are some hyperlinks. Bottom of this bar there is a sidebar on the left side actually appears when that webpage moves into small devices screen.We have to put essentail hyperlinks inside the navigation menu bar like “Home, About us, Contac us, Privacy policy, terms nad & condition and of cource a logo”. Minimum we should keep 5 to 7 links to make best navigation menu.

How do I create a navigation bar in HTML and CSS?

If you are feeling difficulty understanding this program Responsive Navigation Menu Bar. You can watch a full video tutorial of this program which is given below. I hope all your confusion will clear after watching the video.

Create Navigation Menu Bar in HTML CSS [Video Tutorial]

As you have seen on the video of this program, at first there is a full horizontal bar on the top side. On the left side of this navbar, there is one logo with the name “Brand” and on the right side, there are some hyperlinks. When we hover in these hyperlinks their background color change into white and hyperlinks color changes into black very smoothly. To make this smooth I have used the CSS transition property.

Also, you have seen, when this navbar’s webpage is decreased all hyperlinks are disappeared except the logo and one bar appears on the right. When we clicked that button all hyperlinks smoothly slide from left to right as a sidebar. To make this navigation responsive, I have used the @media property of the CSS and to control the side menu I have uses an HTML input checkbox.

If you are familiar with HTML and CSS you can easily create this program Responsive Navigation Menu Bar or I want to say that if you have knowledge about JavaScript you can control that side menu by JavaScript without using “Checkbox”. For those who are feeling difficulty building this navbar, don’t worry, I have provided all the source codes of this navigation menu below. You can copy all codes from below and it is totally free.

How do I create a navigation bar in HTML and CSS? Source Code

Copy the following codes of this program Responsive Navigation Menu Bar , you need to make two files, one is an HTML file and another is a CSS file. After creation these files you can copy-paste the following codes in your file. You can also download all source code files from the given “Download Button” directly.

How do you make a navigation bar in HTML?

Create an HTML file with the name of index.html on your computer and copy-paste the given HTML code in your document.




  
    
   Responsive Navigation Menu
    
    
    
  
  
    
      Brand
      
      
        
      
      
        Home
        About
        Services
        Gallery
        Feedback
      
    
    
      Responsive Navigation Menu Bar Design
      using only HTML & CSS

create a CSS file with the name of style.css on your computer and copy-paste the given CSS code in your document.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
} 
nav{
  display: flex;
  height: 80px;
  width: 100%;
  background: #1b1b1b;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  flex-wrap: wrap;
}
nav .logo{
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}
nav ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
nav ul li{
  margin: 0 5px;
}
nav ul li a{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover{
  color: #111;
  background: #fff;
}
nav .menu-btn i{
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"]{
  display: none;
}
@media (max-width: 1000px){
  nav{
    padding: 0 40px 0 50px;
  }
}
@media (max-width: 920px) {
  nav .menu-btn i{
    display: block;
  }
  #click:checked ~ .menu-btn i:before{
    content: "\f00d";
  }
  nav ul{
    position: fixed;
    top: 80px;
    left: -100%;
    background: #111;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
  }
  #click:checked ~ ul{
    left: 0;
  }
  nav ul li{
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a{
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked ~ ul li a{
    margin-left: 0px;
  }
  nav ul li a.active,
  nav ul li a:hover{
    background: none;
    color: cyan;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: -1;
  width: 100%;
  padding: 0 30px;
  color: #1b1b1b;
}
.content div{
  font-size: 40px;
  font-weight: 700;
}

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 Navbar Menu 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.

Responsive Navigation Menu Bar in HTML CSS

CodingNepal — Sat, 25 Apr 2020 06:29:00 +0000

Hey friends, today in this blog you’ll learn how to create a Fully Responsive Navigation Menu Bar using only HTML & CSS. In the earlier blog, I have shared how to create a Responsive Sidebar Menu using HTML & CSS and now it’s time to create a navigation bar in HTML.

As you know the Menu Bar or Navigation Bar (Navbar) is important for any kind of website. Many websites have a responsive navbar or a responsive navbar with a dropdown menu. Essentially, responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size on which it is viewed. It keeps images from being larger than the screen width and prevents visitors from mobile devices from needing to do extra work to read your content.

In our design (Responsive Navigation Bar), as you can see in the preview image, there is a horizontal navigation bar or navbar with a logo on the left side and some navigation links on the right side. This is a very simple navigation bar and it is created using only HTML & CSS.

The best part about this navigation bar is, it is fully responsive for any kind of device including mobile phones. On the pc, this navigation bar displayed in a horizontal line but on mobile devices, this navbar or navigation bar displayed in a vertical line. On the mobile, you have the option to show or hide the menu bar by clicking on the hamburger menu icon.

Video tutorial of Responsive Navigation Menu Bar

In the video tutorial, you have seen this is a pure CSS responsive navigation bar and I’ve used CSS @media property to make this navigation bar fully responsive for mobile devices. If you like this responsive navigation bar and want to get source codes of this program then you can easily copy the codes of this tutorial from the given copy boxes or you can also download the code files of this navigation menu bar.

If you’re a beginner and you know a little bit of HTML & CSS then the codes and concept of this responsive navigation menu bar will definitely help you to understand HTML & CSS more. This is a very simple responsive navigation bar with few and clean codes.

Responsive Navigation Menu Bar [Source Codes]

To create this responsive navigation 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 into your file. You can also download the source code files of this responsive navigation menu bar from the below download button.

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.




  
    
    Responsive Navbar | CodingNepal
    
    
    
  
  
    
      
      
        
      
      DesignX
      
        Home
        About
        Services
        Contact
        Feedback

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.

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
}
nav{
  background: #0082e6;
  height: 80px;
  width: 100%;
}
label.logo{
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}
nav ul{
  float: right;
  margin-right: 20px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}
a.active,a:hover{
  background: #1b9bff;
  transition: .5s;
}
.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}
@media (max-width: 952px){
  label.logo{
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: #0082e6;
  }
  #check:checked ~ ul{
    left: 0;
  }
}
section{
  background: url(bg1.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}

That’s all, now you’ve successfully created a Responsive Navigation Menu Bar using HTML & CSS. If your code doesn’t work or you’ve faced any errors/problems 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.

Responsive Navigation Bar – CodingNepal

Create Hoverable Sidebar Menu in HTML CSS and JavaScript

Hoverable Sidebar Menu in HTML CSS & JavaScript

Steps For Creating Sidebar Menu in HTML and CSS

Conclusion and Final Words

Responsive Side Navigation Bar in HTML CSS and JavaScript

Steps to Create a Side Navigation Bar in HTML CSS JS

Conclusion and Final Words

Create Responsive Navigation Bar in HTML CSS & JavaScript

Navigation Bar in HTML CSS & JS | Video Tutorial

You May Like This:

Navigation Bar HTML CSS & JS [Source Code]

Sticky Navigation Bar in HTML CSS and JavaScript | With Source Code

Sticky Navigation Bar in HTML CSS and JavaScript

You Might Like This:

Sticky Navigation Bar | Source Code

Sticky Navigation Bar

Responsive Drop Down Menu with Sub Menu in HTML & CSS | Free Source Code

How to create a dropdown navigation bar in HTML CSS?

What is Drop-Down Menu?

How many links should be in your main navigation and sub-menu?

What is the element you have included on the drop-down navigation bar?

How do I create a dropdown navigation menu with a submenu?

In HTML:

In CSS:

Drop Down Navigation Menu with Sub Menu | Video Tutorial

You May Like This:

Drop Down Menu with Sub Menu | Source Code

How do you create a dropdown in HTML?

Responsive Navigation Menu Bar HTML & CSS

Q: How can we create a responsive navigation bar using HTML and CSS?

What is Navigation Menu Bar?

How do I create a navigation bar in HTML and CSS?

Create Navigation Menu Bar in HTML CSS [Video Tutorial]

You Might Like This

How do I create a navigation bar in HTML and CSS? Source Code

How do you make a navigation bar in HTML?

Responsive Navigation Menu Bar in HTML CSS

Video tutorial of Responsive Navigation Menu Bar

You might like this:

Responsive Navigation Menu Bar [Source Codes]