ADVERTISEMENT

Responsive Navbar On Codepen

Telegram Group Join Now

ADVERTISEMENT

Responsive Navbar On Codepen

Hey friends, today we’ll create a cool Responsive Nav bar On Codepen using HTML, CSS & JavaScript, And Code Available On Codepen. As the name suggests, we use it for providing ease of access to users when they visit our website. So, let’s start our HTML CSS Responsive Navbar Codepenproject.

 

ADVERTISEMENT

HTML Code

ADVERTISEMENT

Okay, so first we will need to code our HTML. Generally, all links of the navbar will be stored in an Unordered List Tag as it is a common and good practice.
Besides that we also need to paste the following code in our head tag:

Code by codingporium
Project Download Link Available Below
Language used HTML , CSS and JavaScript
External link / Dependencies Yes
Responsive Yes
Responsive Navbar Table
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
 <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe"
        crossorigin="anonymous"></script>

By adding this code snippet to the head tag we are accomplishing the following task:
Import Josefin sans font from Google Fonts
Import FontAwesome Icons for the bars icon to appear on small screens.

ADVERTISEMENT

Take a look at the code segment below to learn more on what’s below of the head tag:

ADVERTISEMENT

<body>
  <nav class="navbar">
    <span class="navbar-toggle" id="js-navbar-toggle">
            <i class="fas fa-bars"></i>
        </span>
    <a href="#" class="logo">logo</a>
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </nav>
</body>

50+ Html ,Css & Javascript Projects With Source Code

The output would be:
Responsive Navbar On Codepen

CSS Code

Next, we’ll add CSS to style our HTML layout and position it like below:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Josefin Sans", sans-serif;
}

.navbar {
  font-size: 18px;
  background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;
}

.main-nav {
  list-style-type: none;
  display: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
}

.main-nav li {
  text-align: center;
  margin: 15px auto;
}

.logo {
  display: inline-block;
  font-size: 22px;
  margin-top: 10px;
  margin-left: 20px;
}

.navbar-toggle {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
}

.active {
  display: block;
}

@media screen and (min-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    height: 70px;
    align-items: center;
  }

  .main-nav {
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
  }

  .main-nav li {
    margin: 0;
  }

  .nav-links {
    margin-left: 40px;
  }

  .logo {
    margin-top: 0;
  }

  .navbar-toggle {
    display: none;
  }

  .logo:hover,
  .nav-links:hover {
    color: rgba(255, 255, 255, 1);
  }
}

 

ADVERTISEMENT

The output is:

 

 

Responsive Navbar On Codepen
Responsive Navbar On Codepen

 

ADVERTISEMENT

Our navigation bar looks stylish enough, however, it needs some more work. This is because the code earlier only styles, positions and makes it responsive. However, when this navigation bar is viewed on small screens/mobile we are supposed to be able to click the icon to open the navbar.

ADVERTISEMENT

10+ Javascript Projects For Beginners With Source Code

But we haven’t added JavaScript. Without JavaScript, the navbar will not open completely when the icon is clicked. So next we will add JavaScript.
JavaScript Codes
As I mentioned earlier in the CSS code explanation, we need JavaScript so that the navbar completely opens for small screens when the bar icon is clicked.

Here’s how this navbar is without JavaScript:

So let’s solve the problem with JavaScript. Add the following code:

let mainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-navbar-toggle");

navBarToggle.addEventListener("click", function() {
  mainNav.classList.toggle("active");
});

Responsive Navbar On Codepen

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

You can also see the output by clicking the result button in the code segment above. Lastly, let’s see what changes we might need to make for this navbar to be better.
Make it Work For YOU

ADVERTISEMENT

So, now we have coded this responsive navbar. However, we need to edit and change some components to make it work for us better.
First, you can change the logo Name from logo to your website name
Secondly, to make the links working, add your link at the <a href=”#”>Blog</a> . Add the # place, type, or paste your link.

ADVERTISEMENT

Thank You!

ADVERTISEMENT

Do contact me at codingporium.blogspot.com/p/contact.html or comment down below any doubts or suggestions you have. Subscribe to my YouTube channel and do follow me on Instagram. I hope this post was useful and thanks to Code With Random for giving me the chance to write here I hope to see you all in future posts. Goodbye!

ADVERTISEMENT

Written by: @codingporium

Which code editor do you use for this Responsive Navbar coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

Yes!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT