CodePen Embed - My first navbar ever

Live

​x
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Navbar</title>
  <!--Font Awesome link-->
  <script src="https://kit.fontawesome.com/c238d9165e.js" crossorigin="anonymous"></script>
​
</head>
​
<body>
  <header></header>
​
  <!--navbar-->
  <nav>
    <div class="logo" title="LOGO PLACEHOLDER">
      <a href="#"><i class="fas fa-faucet"></i></a>
    </div>
​
    <div>
      <form class="searchbar-container">
        <button id="icon">
          <i class="fas fa-search"></i>
        </button>
        <input type="text" placeholder="Search...">
      </form>
    </div>
​
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="products.html">Products</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
​
    <div class="burger">
      <input type="checkbox">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </nav>
​
  <main>
    <button id="goToTopBtn" title="Go back to top">TOP</button>
    <article>
      <section>
        <h1>Here is some text</h1>
        <p>To enable page scroll. Notice the sticky navbar!</p>
​
        <ul>
          <li>typical list item</li>
          <li>typical list item</li>
          <li>typical list item</li>
          <li>typical list item</li>
          <li>typical list item</li>
        </ul>
​
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa asperiores temporibus perferendis officiis, maxime delectus eius commodi vel iure assumenda, obcaecati alias! Tempore saepe perferendis est dolorum libero incidunt harum assumenda ducimus, quod corporis, odio maiores nihil quam unde ratione ut eveniet delectus aspernatur amet cupiditate sit, fuga nulla omnis? Temporibus totam rerum, facilis voluptatum consequatur vero numquam hic illo, nostrum a quibusdam debitis saepe eum commodi corporis iure provident nihil magnam necessitatibus. Consectetur voluptatibus illum at molestiae, eaque numquam modi optio facere exercitationem! Nobis doloremque, reiciendis voluptatem sint iste rerum voluptates! Veritatis ullam voluptate odit explicabo non atque error.</p>
​
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet culpa expedita assumenda nihil voluptatibus deleniti tempora fugiat neque, hic reiciendis non nisi nemo dolor, consequuntur debitis quibusdam blanditiis? Ullam, temporibus.</p>
      </section>
      <section id="#1">
        <h2>Generic h2</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores placeat perspiciatis similique, magni consequuntur facere omnis quos dolore obcaecati soluta sit necessitatibus accusantium debitis minima inventore quidem aliquid aut nisi aperiam incidunt numquam non quo! Repudiandae cupiditate assumenda soluta facere quis ullam esse cum possimus.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem totam officiis magnam unde placeat ut, beatae hic nam quibusdam quos reprehenderit quas quae. Iste odit quia omnis natus illum facilis, officia fugit autem nobis.</p>
      </section>
      <p>Here is a Python program for checking if a number is prime or not.</p>
      <section class="code">
        <code>
          <pre>
#TAKING INPUT
number = int(input("what number are we gonna check today? "))
​
#CHECKING IF GREATER THAN ONE
if number > 1:
    #DIVIDING BY EVERY NUMBER BETWEEN 1 AND NUMBER FROM INPUT
    for i in range(2, number):
        #IF DIVIDABLE, IT'S NOT A PRIME NUMBER
        if number % i == 0:
            print("This ain't a prime number, man")
            break
        #IF NOT, IT'S A PRIME NUMBER
        else:
            print("This number is a prime number, meaning 
            \n1. it's greater than one and
            \n2. has only 2 divisors, the number itself and 1.")
            break
else:
    print(f"""Prime numbers are greater than one.
    \n {number} is less than one, so it's not a prime number""")
          </pre>
        </code>
      </section>
      <section id="#3">
        <h2>Generic h2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, necessitatibus! Modi doloribus distinctio ad dolore, in ex maiores temporibus vitae odio consequatur voluptas dignissimos culpa sunt harum asperiores labore aliquid quam neque ullam, blanditiis quaerat vel perferendis nobis. Mollitia optio, vero atque deserunt modi id? Incidunt autem porro mollitia labore.</p>
​
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam autem qui quo aliquid a excepturi maiores error vero nam deleniti consequuntur illo, eius dignissimos dolores nihil molestiae odit, modi voluptatem ducimus possimus blanditiis quibusdam eos nesciunt distinctio. Earum voluptas aperiam dolores molestiae harum possimus soluta accusantium iusto quia asperiores assumenda cumque expedita vitae rerum nisi vero facilis architecto minima magnam, eveniet excepturi unde laborum! Nobis inventore sit soluta quisquam assumenda? Dolorum culpa recusandae sed quasi saepe explicabo autem possimus sit perferendis maiores iusto repellat magni at tempora, sapiente quos nulla. Maxime expedita laudantium nobis vitae veniam consectetur molestias quam amet, incidunt fugiat quidem, libero neque laboriosam quae autem, deserunt nostrum. Praesentium, vel non necessitatibus libero in nesciunt pariatur placeat reprehenderit laborum repellendus reiciendis possimus, ea hic exercitationem itaque deleniti sapiente, tempora voluptatem animi qui! Saepe minima accusamus repellendus ad? Exercitationem recusandae error sit ex et repudiandae qui accusantium consequuntur accusamus?</p>
      </section>
    </article>
  </main>
  <footer>
    <hr>
    <p>Made by Klrfl, 2021. All rights reserved.</p>
  </footer>
</body>

Live

xxxxxxxxxx
 
/*import Open Sans from Google Fonts*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Poppins:wght@200&display=swap");
​
/*basic general styling*/
body {
  font: 1rem "Open Sans", sans-serif;
  background: #f06d06;
  color: white;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
​
/*navbar*/
nav {
  background: rgb(110, 110, 110);
  padding: 1em;
  z-index: 1;
  box-shadow: 0 1px 2rem 1px black;
​
  /*for sticky*/
  position: -webkit-sticky; /*for Safari*/
  position: sticky; /*For other browsers*/
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
​
  a {
    padding: 0;
    color: white;
  }
​
  .searchbar-container {
    display: flex;
    align-items: center;
    height: 1em;
​
    #icon {
      background: dodgerblue;
      border: none;
      padding: 0.5em;
      opacity: 0.8;
      &:hover {
        opacity: 1;
        cursor: pointer;
      }
    }
​
    input {
      outline: none;
      border: none;
      border-radius: 0 1rem 1rem 0;
      width: 60%;
      margin: 0;
      padding: 0.5em;
      width: 100%;
      height: 100%;
​
      &:focus {
        outline: 3px solid black;
      }
    }
  }
​
  /*links*/
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 40%;
    height: 1em;
​
    li {
      position: relative;
      padding: 1em;
      cursor: pointer;
      transition: background 200ms ease;
​
      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: dodgerblue;
        transform: scale(0);
        transition: transform 200ms ease;
      }
​
      &:hover {
        background: rgb(80, 80, 80);
        &::before {
          transform: scale(1);
        }
      }
    }
​
    a {
      text-decoration: none;
      color: white;
      transition: all 300ms ease;
​
      &:active {
        text-decoration: underline;
      }
    }
  }
}
​
/*FREAKING BURGER 🤬🤬🤬*/
.burger {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 30px;
  height: 30px;
  // padding-right: 20px;
​
  input {
    /*REMEMBER THIS IS THE CHECKBOX*/
    position: absolute;
    height: 30px;
    width: 30px;
    left: -4px;
    top: -2px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
  }
​
  span {
    display: block;
    width: 30px;
    height: 0.2rem;
    background-color: white;
  }
}
​
/*FREAKING BURGER ANIMATION🤬🤬🤬*/
.burger span:nth-child(2),
.burger span:nth-child(3),
.burger span:nth-child(4) {
  transform-origin: 0 0;
  transition: all 300ms ease;
}
​
.burger input:checked ~ span:nth-child(2) {
  transform: rotate(45deg) translate(1px, -1px);
}
​
.burger input:checked ~ span:nth-child(3) {
  opacity: 0;
  tranform: scale(0);
}
​
.burger input:checked ~ span:nth-child(4) {
  transform: rotate(-45deg) translate(-1px, 1px);
}
​
/*main content*/
article {
  max-width: 80vw;
  margin: 0 auto;
  padding: 0px 20px;
​
  .code {
    background: rgb(80, 80, 80);
    border-left: 5px solid dodgerblue;
    font-size: 1.1em;
    padding: 1rem 0.5rem;
    overflow: auto;
  }
}
​
#goToTopBtn {
  display: none;
  position: fixed;
  outline: none;
  border: none;
  bottom: 2em;
  right: 0;
  z-index: 10;
  width: 3rem;
  height: 4rem;
  padding: 0.5em;
  border-radius: 1em 0 0 1em;
  text-transform: uppercase;
  cursor: pointer;
}
​
footer {
  font-family: "Poppins", sans-serif;
  background-color: rgb(80, 80, 80);
  padding: 1rem;
}
​
/*media query*/
@media screen and (min-width: 1000px) {
  nav ul {
    justify-content: center;
  }
}
​
@media screen and (max-width: 1000px) {
  nav ul {
    width: 50%;
  }
}
​
@media screen and (max-width: 850px) {
  nav searchbar-container {
    width: 30%;
  }
​
  .Youtube-iFrame {
    flex-direction: column;
    align-items: center;
​
    p {
      font-size: 1.2rem;
      text-align: center;
      width: 80%;
    }
  }
}
​
@media screen and (max-width: 620px) {
  article {
    max-width: 100vw;
    padding: 10px;
  }
​
  nav {
    padding: 1rem 0.5rem;
​
    ul {
      position: absolute;
      inset: 0;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      width: 100%;
      height: 100vh;
      background-color: rgba(90, 90, 90, 0.8);
      backdrop-filter: blur(5px);
      transform: translateY(-100%);
      transition: transform 400ms ease;
​
      li {
        text-align: center;
        padding-block: 2em;
        width: 100%;
​
        &:hover {
          background: rgba(80, 80, 80, 0.8);
        }
      }
    }
  }
​
  nav ul.slide {
    transform: translateY(0);
  }
​
  .burger {
    display: flex;
  }
}
​

Live

xxxxxxxxxx
 
//goToTop Button
const topButton = document.getElementById("goToTopBtn");
​
window.onscroll = function () {
  scrollFunction();
};
​
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    goToTopBtn.style.display = "block";
  } else {
    goToTopBtn.style.display = "none";
  }
}
​
topButton.addEventListener("click", () => {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
  behavior = "smooth";
});
​
//end of goToTop Button
​
//sidebar//
const menuToggle = document.querySelector(".burger input");
const sidebar = document.querySelector("nav ul");
​
menuToggle.addEventListener("click", function () {
  sidebar.classList.toggle("slide");
});
​

This Pen is owned by Efraim Munthe on CodePen.

See more by @Klrfl on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.