CODEWITHSUNDEEP
javascripthtmlcss
mags355
mags355

Reputation: 109

Navbar Logo pushing down other Navbar Links

I've followed a youtube tutorial at [https://www.youtube.com/watch?v=H4MkGzoACpQ] to create a nice responsive Navbar.

The problem is when I try and personalise it and add a logo on the left side of the Nav, it seems to push the other nav links off the navbar when viewed in full screen.

As well as that, when the viewport goes below a certain width, there seems to be a circle visible around the hamburger icon.

Please help me to clean up this Navbar. Many thanks, I'm just a beginner at web design.

Here is a link to what the logo should be also - [https://www.google.com/search?q=rossnowlagh+surf+school+logo&sxsrf=ALeKk00Hg24OG5c7Wefc6jal-JyqLmB18Q:1586961567476&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjxpYHE1OroAhXXiVwKHQi3CEsQ_AUoAXoECAwQAw&biw=1440&bih=789#imgrc=36AEO3-lo_sGxM]

I've included my HTML, CSS and JS code here... 

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");

hamburger.addEventListener("click", () => {
  navLinks.classList.toggle("open");
  links.forEach(link => {
    link.classList.toggle("fade");
  });
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}

nav {
  height: 12vh;
  background: #5b78c7;
}

#nav-logo
{
  padding-top: 5px;
  margin-left: 20px;
  height: 80px;
  width: 80px;
}

.nav-links {
  display: flex;
  list-style: none;
  width: 50%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.landing {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing h1 {
  margin: 100px;
  font-size: 50px;
  color: #ae5fce;
}

@media screen and (max-width: 768px) {
  .line {
    width: 30px;
    height: 3px;
    background: white;
    margin: 5px;
  }
  nav {
    position: relative;
  }

  .hamburger {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
  }

  .nav-links {
    position: fixed;
    background: #5b78c7;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(100px at 90% -10%);
    -webkit-clip-path: circle(100px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
  }
  .nav-links.open {
    clip-path: circle(1000px at 90% -10%);
    -webkit-clip-path: circle(1000px at 90% -10%);
    pointer-events: all;
  }
  .landing {
    flex-direction: column;
  }
  .nav-links li {
    opacity: 0;
  }
  .nav-links li a {
    font-size: 25px;
  }
  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }
  li.fade {
    opacity: 1;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>Rossnowlagh Surf</title>
  </head>
  <body>
    <nav>
      <div class="hamburger">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
      <img id="nav-logo" src="img/rossnowlagh-logo.png">
      <ul class="nav-links">
        <li><a href="#">About</a></li>
        <li><a href="#">Packages</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <section class="landing">
      <img src="./circles.svg" alt="dots" />
      <h1>Dots</h1>
    </section>

    <script src="app.js"></script>
  </body>
</html>

Upvotes: 1

Views: 207

Answers (1)

Brett East
Brett East

Reputation: 4322

What's happening here is that your nav logo is taking up space, and is pushing things off the screen in a way that is breaking the layout.

There are probably a few ways to address this, including using a flexbox and arranging the items for your nav inside it, but I think that the following option is probably going to be the simplest for your task:

#nav-logo
 {
   padding-top: 5px;
   margin-left: 20px;
   height: 80px;
   width: 80px;
   position: absolute; // add this to take the logo out of the layout
   z-index: 5; // add this to keep the logo in front of the other content
 }

Upvotes: 1

Related Questions