navbar menu – 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. Mon, 15 May 2023 09:33:31 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create Responsive Navigation Bar in HTML CSS & JavaScript https://www.codingnepalweb.com/navigation-bar-html-css-javascript/ https://www.codingnepalweb.com/navigation-bar-html-css-javascript/#respond Sun, 27 Nov 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4137 Create Responsive Navigation Bar in HTML CSS & JavaScript

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.

You May Like This:

Navigation Bar HTML CSS & JS [Source Code]

To create Navigation Bar HTML CSS & JS, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. 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.

<!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" />
    <title>Navigation Bar with Search Box</title>
    <link rel="stylesheet" href="style.css" />
    <!-- Unicons CSS -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
   <script src="script.js" defer></script>
  </head>
  <body>
    <nav class="nav">
      <i class="uil uil-bars navOpenBtn"></i>
      <a href="#" class="logo">CodingLab</a>

      <ul class="nav-links">
        <i class="uil uil-times navCloseBtn"></i>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>

      <i class="uil uil-search search-icon" id="searchIcon"></i>
      <div class="search-box">
        <i class="uil uil-search search-icon"></i>
        <input type="text" placeholder="Search here..." />
      </div>
    </nav>
  </body>
</html>

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

 

]]> https://www.codingnepalweb.com/navigation-bar-html-css-javascript/feed/ 0 Navigation Bar With Page Scroll To Every Section | Free Source Code https://www.codingnepalweb.com/navigation-bar-with-scroll-to-top/ https://www.codingnepalweb.com/navigation-bar-with-scroll-to-top/#respond Tue, 02 Mar 2021 21:09:54 +0000 https://www.codingnepalweb.com/?p=4233 Navigation Bar With Scroll To Top Button | Scroll To Every Section

Q: How  To Scroll to a particular div position when clicking on a link from another page?

A: After watching the following article and video tutorial, you will definitely be able to make the page scroll to every section while clicking on the navigation link.

Hello Friends, today in this blog you will learn to create Navigation Bar with Scroll To Top Button and Scroll To Every Section using only HTML & CSS. As you guys know I have created several video tutorials related to Navigation Bar and Website Design, but I had not created a separate video about how navigation links scroll their every section on click.

Simply we can understand Navigation bar is the horizontal section on the website that contains various hyperlinks and logos. Hyperlinks help users to a quick move to the particular section or webpages which is related to that nav links.

As we can see the sample of the navigation menu on the webpage. The horizontal section that we can see at the top of the image is our navigation bar. On the left side, there is one logo and on the right side, there are some hyperlinks. On the top side, there is one button. Basically, when we clicked on those navigation links, a related section with that particular links appears smoothly and when we clicked on that arrow up button our main home page appears.

To see the real example and animation of this programming and every code behind creating this scrolling navbar, I have provided a full video tutorial below.

Page Scroll To Every Section Scroll To every Section | Video Tutorial

As you have seen in the given video tutorial. I have kept all hyperlinks in a specific anchor tag. In the section elements, I have given them different IDs and connected their id with hyperlinks (navigation links) simply by doing this our every section starts to appear while clicking on the navigation links.

Also in the scroll to top button, I have given our first section id name (Home), and it starts to scroll to the top while clicking. To make scroll smoother I gave CSS property smooth behavior inside the universal tag(*).

It is a very easy way to make this scrolling while clicking on the link but those friends who are feeling difficulty creating this navigation with scrolling every section can take code from below.

You Might Like This:

Navigation Bar With Page Scroll To Every Section | Free Source Code

To copy the given codes of this programming scroll to every section while clicking on nav links, first, you need to create two files on is an HTML file and another is a CSS file, after creating these two files then you can copy-paste the given codes in your document.

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
  <head>
   <meta charset="UTF-8">
   <title>Navigation Bar With Scroll Every Section</title>
 <link rel="stylesheet" href="style.css">
  <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <nav>
    <div class="navbar">
      <div class="logo"><a href="#">CodingLab</a></div>
      <ul class="menu">
        <li><a href="#Home">Home</a></li>
        <li><a href="#About">About</a></li>
        <li><a href="#Category">Category</a></li>
        <li><a href="#Contact">Contact</a></li>
        <li><a href="#Feedback">Feedback</a></li>
      </ul>
    </div>
  </nav>
  <section id="Home">Home Section</section>
  <section id="About">About Section</section>
  <section id="Category">Category Section</section>
  <section id="Contact">Contact Section</section>
  <section id="Feedback">Feedback Section</section>
  <div class="button">
    <a href="#Home"><i class="fas fa-arrow-up"></i></a>
  </div>
</body>
</html>


@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{
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 75px;
 background: #2980b9;
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
nav .navbar{
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 100%;
 max-width: 90%;
 background: #2980b9;
 margin: auto;
}
nav .navbar .logo a{
  color: #fff;
  font-size: 27px;
  font-weight: 600;
  text-decoration: none;
}
nav .navbar .menu{
  display: flex;
}
.navbar .menu li{
  list-style: none;
  margin: 0 15px;
}
.navbar .menu li a{
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
section{
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #96c7e8;
  font-size: 70px;
}
#Home{
  background: #fff;
}
#About{
  background: #f2f2f2;
}
#Category{
  background: #e6e6e6;
}
#Latest{
  background: #fff;
}
#Contact{
  background: #f2f2f2;
}
#Feedback{
  background: #e6e6e6;
}
.button a{
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: #fff;
  background: #2980b9;
  padding: 7px 12px;;
  font-size: 18px;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.15);
}

If you face any difficulties while creating your Navigation Bar or your code is not working as expected, you can download the source code files for this Website 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-with-scroll-to-top/feed/ 0 Responsive Navigation Menu Bar HTML & CSS https://www.codingnepalweb.com/responsive-navigation-menu-bar-html-css-2/ https://www.codingnepalweb.com/responsive-navigation-menu-bar-html-css-2/#respond Sun, 15 Nov 2020 21:09:04 +0000 https://www.codingnepalweb.com/?p=4255 Responsive Navigation Menu Bar Design using only HTML & CSS

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.

You Might Like This

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.

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   <title>Responsive Navigation Menu</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <nav>
      <div class="logo">Brand</div>
      <input type="checkbox" id="click">
      <label for="click" class="menu-btn">
        <i class="fas fa-bars"></i>
      </label>
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </nav>
    <div class="content">
      <div>Responsive Navigation Menu Bar Design</div>
      <div>using only HTML & CSS</div>
    </div>

  </body>
</html>

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.

]]> https://www.codingnepalweb.com/responsive-navigation-menu-bar-html-css-2/feed/ 0 Responsive Neumorphism Navigation Bar in HTML & CSS https://www.codingnepalweb.com/responsive-neumorphism-navigation-bar-in-html-css/ https://www.codingnepalweb.com/responsive-neumorphism-navigation-bar-in-html-css/#comments Fri, 25 Sep 2020 21:08:34 +0000 https://www.codingnepalweb.com/?p=4268 Responsive Neumorphism Navigation Bar in HTML & CSS

Hello friend, today in this blog I’m going to create a Responsive Neumorphism Navigation Bar using HTML & CSS only. In a previous blog, I have Shared How to Create a Transparent Sidebar Menu using HTML & CSS and now I’m going to create a navigation menu in neumorphism style using pure CSS.

What is a Neumorphism?

Generally, neumorphism means a minimal way to design with a soft, extruded plastic look. A navigation bar is a section where one logo and various hyperlinks exist. It allows users to quickly visit any particular section within the website.

In this program Responsive Neumorphism Navigation Bar, on the webpage, there is a logo at the top left side and some navigation links at the top right side of the navigation bar. On pc, you will see the navigation menu align in horizontal form, and on mobile devices, you will see this navigation align in vertical form. I have used only HTML & CSS.

What is the CSS code for Neumorphism UI?

Important code for Neumorphism Ui are listed below. By adding following  CSS code on the elements, we can create Neumorphism UI:

background: #ecf0f3;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1,
inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;

To make this navigation menu responsive I have used the @media property in the CSS file. With the help of @media property, I have made the webpage responsive for all devices like tablets, mobile, and other various size devices. If you are feeling difficulty understanding this responsive navigation bar then you can watch the full video tutorial.

Neumorphism Navigation Bar | Video Tutorial

In this video [ Responsive Navigation in Neumorphism UI], you have seen a fully responsive navbar, hope you have understood the basic codes to create this type of navigation menu. You have seen in the mobile devices the navigation links appear to align vertically. There is also a button that controls the navigation bar to show or hide. To make this button I have used HTML checkbox control with a label tag.

If you have basic knowledge about Html & CSS then you can easily make this neumorphism navbar also if you have knowledge about JavaScript you can add more functionality as your choice, this is free for all of you you can use this navbar as your purpose. Those friends who are feeling difficult to make this don’t worry if you like this program [Responsive Neumorphism Navigation Bar] and want full source code files I provide them below. You can use this navigation for your HTML, webpages, or other uses.

You Might Like This:

Responsive Neumorphism Navigation Bar | Source Codes

To paste the given codes [Neumorphism Navbar], first of all, you need to create two HTML & CSS files you can copy-paste these codes in your files. If you are feeling confused you can also download the source code files from the given “download button”.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Neumorphism Sidebar Menu | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
   </head>
<body>
  <input type="checkbox" id="check">
  <label class="button bars" for="check"><i class="fas fa-bars"></i></label>
  <div class="side_bar">
    <div class="title">
      <div class="logo">CodingLab</div>
      <label class=" button cancel" for="check"><i class="fas fa-times"></i></label>
    </div>
    <ul>
          <li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
          <li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
          <li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
          <li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
          <li><a href="#"><i class="fas fa-question-circle"></i>About</a></li>
          <li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
          <li><a href="#"><i class="fas fa-phone-volume"></i>Contact</a></li>
          <li><a href="#"><i class="fas fa-comments"></i>Feedback</a></li>
        </ul>
        <div class="media_icons">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-youtube"></i></a>
        </div>

  </div>
</body>
</html>

@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{
  background: #ecf0f3;
}
nav{
  width: 100%;
  padding: 12px 0;
  background: #ecf0f3;
  box-shadow: -3px -3px 7px #ffffff,
             3px 3px 5px #ceced1,
             inset -3px -3px 7px #ffffff,
             inset 3px 3px 5px #ceced1;
}
nav .menu{
  max-width: 1270px;
  margin: auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu .logo a{
  font-size: 28px;
  font-weight: 600;
  text-decoration: none;
  color: #31344b;
}
.menu ul{
  list-style: none;
  display: flex;
}
.menu ul a{
  margin:0 8px;
  text-decoration: none;
  font-size: 18px;
  color: #31344b;
  font-weight: 400;
  display: inline-flex;
  padding: 10px 12px;
 box-shadow: -3px -3px 7px #ffffff,
            3px 3px 5px #ceced1;
  position: relative;
  transition: all 0.3s ease;
}
.menu ul a:hover:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.upper{
  font-size: 40px;
  font-weight: 600;
  color: #31344b;
}
.lower{
  font-size: 40px;
  font-weight: 600;
  color: #31344b;
}
.menu ul a:hover{
  color: #3498db;
}
nav label.btn{
  color: #31344b;
  font-size: 18px;
  cursor: pointer;
  display: none;
}
nav label.cancel{
  position: absolute;
  top: 25px;
  right: 30px;
}
#check{
  display: none;
}
@media (max-width:940px) {
  .menu ul{
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 400px;
    padding-top: 45px;
    height: 100%;
    background: #ecf0f3;
    box-shadow: 0 5px 10px #b0b0b5;
    z-index: 12;
    transition: all 0.3s ease;
  }
  .menu ul a{
   display: block;
   font-size: 23px;
   width: 100%;
   margin-top: 30px;
   box-shadow: none;
   text-align: center;
  }
  .menu ul a:hover:before{
    box-shadow: none;
  }
  nav label.bars{
    display: block;
  }
  #check:checked ~ label.bars{
    display: none;
  }
  #check:checked ~ ul label.cancel{
    display: block;
  }
  #check:checked ~ ul{
    left: 0;
  }
}

If you face any difficulties while creating your Responsive Neumorphism Navigation Bar or your code is not working as expected, you can download the source code files for this Neumorphism 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/responsive-neumorphism-navigation-bar-in-html-css/feed/ 1