Responsive navigation bar with fun hover effect

March 25, 2022

0 796 3 minutes read

Responsive navigation bar with fun hover effect

Before We Start

A navigation bar is one of the main components of a website,It contains links to the other sections and a user interface element within a website. The most important one and the first section that the user sees when he/she enters a website is the navigation bar and it links to the other main parts. Responsive navigation bar with fun hover effect.

In a website the navigation bar will be an important part and it helps the users to find the pages quickly If you have ever seen a website which doesn’t has a navigation bar, you may have found it’s not easy to locate the exact page what you need. So if you are a person who wishes to develop a website, you have to know how to create a navigation bar properly.

Download Source Code

How to create a responsive navigation bar ? We are here to solve your problem.
In this article we discuss how to create a responsive navigation bar. Before we start please read the below articles which easier you to understand the process, if you are new to development.

**Download Premium Plugins & Templates from** **Template Cafe**

Step 1 – Add HTML

It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag.

<html>
<body>
    <header>
    <h1 class="logo">Logo</h1>
    <input type="checkbox" id="nav-toggle" class="nav-toggle">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </header>
  
  <div class="content">
    <h2>Your content would go here</h2>
  </div>
</body>
</html>

Step 2 – Add CSS

Copy and paste below code in your HTML editor between <style></style> tag.

<style>
            
            @import url("https://fonts.googleapis.com/css?family=Work+Sans:300,600");
:root {
  --background: rgba(0, 214, 170, 0.85);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #222;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
}

.content {
  height: 200vh;
  background-image: url(//unsplash.it/1000/1000);
  background-color: #333;
  background-blend-mode: multiply;
  background-size: cover;
  display: grid;
  place-items: center;
}

/* navigation styles start here */
header {
  background: var(--background);
  text-align: center;
  position: fixed;
  z-index: 999;
  width: 100%;
}

/* changed this from the tutorial video to
   allow it to gain focus, making it tabbable */
.nav-toggle {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.nav-toggle:focus ~ .nav-toggle-label {
  outline: 3px solid rgba(173, 216, 230, 0.75);
}

.nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: white;
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: "";
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: var(--background);
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  color: #000;
}

.nav-toggle:checked ~ nav {
  transform: scale(1, 1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 800px) {
  .nav-toggle-label {
    display: none;
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
  }

  .logo {
    grid-column: 2/3;
  }

  nav {
    /* the following lines are not from my video, but add Edge support */
    position: relative;
    text-align: left;
    transition: none;
    transform: scale(1, 1);
    background: none;
    top: initial;
    left: initial;
    /* end Edge support stuff */
    grid-column: 3/4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  nav ul {
    display: flex;
  }

  nav li {
    margin-left: 3em;
    margin-bottom: 0;
  }

  nav a {
    opacity: 1;
    position: relative;
  }

  nav a::before {
    content: "";
    display: block;
    height: 5px;
    background: black;
    position: absolute;
    top: -0.75em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }

  nav a:hover::before {
    transform: scale(1, 1);
  }
} 
    </style>

At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.

Download Source Code

Video Tutorial

Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.

Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.

March 25, 2022

0 796 3 minutes read