Responsive navbar with source code with only CSS and no Javascript

Janak Kumar Shrestha
December 19, 2022
0

 Responsive navbar with source code with only CSS and no Javascript.

Demo gif



Q. why to use Responsive navbar in website?

=> A responsive navbar is a navigation bar that adjusts its layout and display properties in response to the size and orientation of the device it is being viewed on. This is important because it allows the navbar to provide an optimal viewing experience for users, regardless of the device they are using.

There are several benefits to using a responsive navbar on :

  1. Improved usability: A responsive navbar makes it easier for users to navigate the website, especially on smaller devices such as smartphones.

  2. Enhanced user experience: A responsive navbar ensures that users have a seamless and consistent experience across different devices, which can improve the overall user experience of the website.

  3. Better search engine rankings: Search engines tend to favor websites that are mobile-friendly, and a responsive navbar is an important aspect of making a website mobile-friendly.

  4. Increased engagement: A responsive navbar can help increase engagement on the website by making it easier for users to find and access the content they are looking for

Overall, using a responsive navbar can help improve the usability and user experience of a website, which can lead to increased engagement and better search engine rankings.


HTML Code of Navbar:


      
      <!-- ------------- navbar ----------------- -->
  <nav title="Navigation Bar" id="navbar">
    <div class="wrapper">
      <div class="logo"><a href="./index.html"><img src="./img/logo.png" alt=""></a></div>
      <input type="radio" name="slider" id="menu-btn">
      <input type="radio" name="slider" id="close-btn">
      <ul class="nav-links">
        <label for="close-btn" onclick="this.parentElement.parentElement.parentElement.style.display='none';"
          class="btn close-btn">
          <i style="font-size: 45px;">&times;</i>
        </label>
        <li><a href="#">Documentary</a></li>
        <li><a href="#">Bollywood</a></li>
        <li>
          <a href="#" class="desktop-item">Genra</a>
          <input type="checkbox" id="showDrop">
          <label for="showDrop" class="mobile-item">Genra</label>
          <ul class="drop-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Adventure</a></li>
            <li><a href="#">Animated</a></li>
            <li><a href="#">Comedy</a></li>
            <div class="dropdown2">
              <li> <a class="dropBtn2" href="#">More
                  <i style="font-size:25px;">&ctdot;</i>
                </a></li>
              <ul class="drop-content2">
                <li> <a href="#">Crime</a></li>
                <li> <a href="#">Fantasy</a></li>
                <li> <a href="#">Horror</a></li>
                <li> <a href="#">Mystery</a>
              </ul>
            </div>
          </ul>
        </li>
        <li>
          <a href="#" class="desktop-item">Movies</a>
          <input type="checkbox" id="showMega">
          <label for="showMega" class="mobile-item">Movies</label>
          <div class="mega-box">
            <div class="content">
              <div class="row">
                <img src="./img/out.png" alt="">
              </div>
              <div class="row">
                <header>Web Series</header>
                <ul class="mega-links">
                  <li><a href="#">Hindi Dubbed</a></li>
                  <li><a href="#">English</a></li>
                  <li><a href="#">English TV shows</a></li>
                  <li><a href="#">Nepali TV shows</a></li>
                </ul>
              </div>
              <div class="row">
                <header>Production Company</header>
                <ul class="mega-links">
                  <li><a href="#">Marvel Studios</a></li>
                  <li><a href="#">20th Century Fox</a></li>
                  <li><a href="#">Walt Disney Pictures</a></li>
                  <li><a href="#">Universal Pictures</a></li>
                </ul>
              </div>
              <div class="row">
                <header>Year</header>
                <ul class="mega-links">
                  <li><a href="#">Now - 2015</a></li>
                  <li><a href="#">2015 - 2000</a></li>
                  <li><a href="#">2000 - 1980</a></li>
                  <li><a href="#">Classic Movies</a></li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li><a href="#">Feedback</a></li>
        <li><a onclick="document.getElementById('subModal').style.display='block'" style="width:auto;">Newsletter</a>
        </li>
      </ul>
      <label for="menu-btn" class="btn menu-btn"><i style="font-size: 45px;">&equiv;</i></label>
    </div>
  </nav>
  <!-- ------------ end ---------------- -->

CSS Code of Navbar:


      /* ==================================== navBar start ========================= */
nav {
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  background: #8debdef1;
}

nav .wrapper {
  position: relative;
  max-width: 1300px;
  padding: 5px 30px;
  height: 60px;
  line-height: 70px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wrapper .logo a {
  color: #000;
  font-size: 30px;
  font-weight: 600;
  text-decoration: none;
  width: 60px;
  height: 50px;
  padding: auto;
}

.wrapper .logo a img {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  text-align: center;
}

.wrapper .nav-links {
  display: inline-flex;
}

.nav-links li {
  list-style: none;
}

.nav-links li a {
  color: #000;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 15px;
  /* border-radius: 5px; */
  transition: all 0.3s ease;
}

.nav-links li a:hover {
  background: #99f7df;
}

.nav-links .mobile-item {
  display: none;
}

.nav-links .drop-menu {
  position: absolute;
  background: #8debdef1;
  width: 180px;
  line-height: 45px;
  top: 60px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box {
  transition: all 0.3s ease;
  top: 60px;
  opacity: 1;
  visibility: visible;
}

.drop-menu li a {
  width: 100%;
  display: block;
  padding: 0 0 0 15px;
  font-weight: 400;
  border-radius: 0px;
}

.mega-box {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 0 30px;
  top: 60px;
  opacity: 0;
  visibility: hidden;
}

.mega-box .content {
  background: #8debdef1;
  padding: 25px 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.mega-box .content .row {
  width: calc(25% - 30px);
  line-height: 45px;
}

.content .row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content .row header {
  color: #000;
  font-size: 20px;
  font-weight: 500;
}

.content .row .mega-links {
  margin-left: -40px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.row .mega-links li {
  padding: 0 20px;
}

.row .mega-links li a {
  padding: 0px;
  padding: 0 20px;
  color: #000;
  font-size: 17px;
  display: block;
}

.row .mega-links li a:hover {
  color: #000;
}

.wrapper .btn {
  color: #000;
  font-size: 20px;
  cursor: pointer;
  display: none;
}

.wrapper .btn.close-btn {
  position: absolute;
  right: 30px;
  top: 10px;
}

@media screen and (max-width: 970px) {
  .wrapper .btn {
    display: block;
  }

  .wrapper .nav-links {
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 350px;
    top: 0;
    left: -100%;
    background: #8debdef1;
    display: block;
    padding: 50px 10px;
    line-height: 50px;
    overflow-y: auto;
    box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
    transition: all 0.3s ease;
  }

  #menu-btn:checked~.nav-links {
    left: 0%;
  }

  #menu-btn:checked~.btn.menu-btn {
    display: none;
  }

  #close-btn:checked~.btn.menu-btn {
    display: block;
  }

  .nav-links li {
    margin: 15px 10px;
  }

  .nav-links li a {
    padding: 0 20px;
    display: block;
    font-size: 20px;
  }

  .nav-links .drop-menu {
    position: static;
    opacity: 1;
    top: 65px;
    visibility: visible;
    padding-left: 20px;
    width: 100%;
    max-height: 0px;
    overflow: hidden;
    box-shadow: none;
    transition: all 0.3s ease;
  }

  #showDrop:checked~.drop-menu,
  #showMega:checked~.mega-box {
    max-height: 100%;
  }

  .nav-links .desktop-item {
    display: none;
  }

  .nav-links .mobile-item {
    display: block;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    padding-left: 20px;
    cursor: pointer;
    /* border-radius: 5px; */
    transition: all 0.3s ease;
  }

  .nav-links .mobile-item:hover {
    background: #99f7df;
  }

  .drop-menu li {
    margin: 0;
  }

  .drop-menu li a {
    /* border-radius: 5px; */
    font-size: 18px;
  }

  .mega-box {
    position: static;
    top: 65px;
    opacity: 1;
    visibility: visible;
    padding: 0 20px;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .mega-box .content {
    box-shadow: none;
    flex-direction: column;
    padding: 20px 20px 0 20px;
  }

  .mega-box .content .row {
    width: 100%;
    margin-bottom: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mega-box .content .row:nth-child(1),
  .mega-box .content .row:nth-child(2) {
    border-top: 0px;
  }

  .content .row .mega-links {
    border-left: 0px;
    padding-left: 15px;
  }

  .row .mega-links li {
    margin: 0;
  }

  .content .row header {
    font-size: 19px;
  }
}

nav input {
  display: none;
}

/* responsive navbar toggle button */
.navbar #nav-check,
.navbar .nav-btn {
  display: none;
}

.drop-content2 {
  display: none;
}

.dropdown2:hover .drop-content2 {
  display: block;
}

.drop-content2 a {
  display: block;
  transition: all 0.5s ease !important;
}

.dropdown2:hover .dropBtn2 {
  background-color: #99f7df;
}

/* --------------------- end --------------------  */




Conclusion :  A responsive navbar is a navigation bar that adjusts its layout and functionality to provide an optimal experience for users on any device. It is an important element of a website's design and user experience, as it allows users to easily access and navigate the website's content. Some key features of a responsive navbar include:

  • A hamburger menu icon that expands to show a dropdown menu on smaller screens

  • The ability to collapse and expand the navbar as the screen size changes

  • Links that are spaced out and easy to tap on mobile devices

  • The use of media queries to apply specific styles based on screen size

Overall, a responsive navbar helps to ensure that users can easily access and navigate a website, regardless of the device they are using.


FAQs:  Here are some possible FAQs for a responsive navbar:

On a mobile device, the navbar may be hidden behind a hamburger menu icon that can be accessed by tapping on the icon.
Yes, the layout of a responsive navbar can often be customized through CSS or through options provided by the navbar's library or framework.
To add or remove items from the navbar, you can edit the HTML code or use a content management system (CMS) to manage the navbar's content.
Yes, you can use CSS to change the color and font of the navbar.

Tags
Share to other apps
Janak Kumar Shrestha

Janak Kumar Shrestha

A passionate self-taught web developer. In my spare time, I blog and upload videos about various technologies. I began coding and frontend development as a hobby and I enjoy designing and developing user interfaces, testing, debugging, writing, learning, and discussing the latest technologies.

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
Top