CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapbootstrap-4
J. Doe
J. Doe

Reputation: 269

Navigation bar doesn't work in all sections (html, css, js)

i can't figure out why the nav bar doesn't work once it goes to another section. it only works when it is at the top of the page (home section). i tried a few different things, but none of them seem to work. i tried looking for other posts but couldn't anything specific to this problem. i only included the "about" section in this code to give an idea. thanks in advance!

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  scroll-behavior: smooth;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
  min-width:100%;
}

.scroll {
  width: 100%;
  height: 100vh;
  scroll-snap-align: center;
  position: relative;
}

/* NAVIGATION BAR */

#main {
    width: 100%;
    height: 100%;
  background-color: green;
}

nav {
    width: 100%;
    height: 80px;
    background-color: #fff;
    line-height: 80px;
    position: fixed;
}

nav ul {
    text-align: center;
}

nav ul li {
    list-style-type: none;
    display: inline-block;
    transition: 0.8s all;
}

nav ul li a {
    text-decoration: none;
    color: gray;
    padding: 30px;
}

nav ul li a:hover {
    color: #000;
}


/* HOME NAME */

.name {
  font-family: sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

/* TYPEWRITER EFFECT */

.css-typing {
  position: absolute;
  top: 55%;
  left: 36.5%;
  /*transform: translateX(-40%) translateY(-60%);*/
}

.css-typing p {
  border-right: .15em solid orange;
  font-family: "Courier";
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}

.css-typing p:nth-child(1) {
  /*width: 7.3em;*/
  width: 10ch;
  -webkit-animation: type 2s steps(10, end);
  animation: type 2s steps(10, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 38ch;
  opacity: 0;
  -webkit-animation: type2 2s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 13ch;
  opacity: 0;
  -webkit-animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
  }
}


/* SECTIONS */

.box {
  width: 100%;
  height: 100vh;
  padding: 70px;
  display: flex;
}

.box .imgPro {
  width: 150px;
  flex: 0 0 150px;
}

.box .imgPro img {
  width: 100%;
  padding: 10px;
  border-radius: 50%;
}

.box .content {
  padding-left: 20px;
}

.box .content h2 {
  margin: 0;
  padding-left: 0;
  padding-bottom: 20px;
  text-align: center;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=devide-width, initialpscale=1.0">
    <title> TITLE </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- link for back to top button -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> 
  </head>

<body>
  <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
  <div class="container">
    <div id="main" class="scroll">
      <nav>
      <!-- <img src="x.png" width="200" height="80"> for top-left logo -->
        <ul>
          <li><a href="#home" class="js-anchor-link">Home</a></li><!--
          --><li><a href="#about" class="js-anchor-link">About</a></li><!--
          --><li><a href="#resume" class="js-anchor-link">Resume</a></li><!--
          --><li><a href="#portfolio" class="js-anchor-link">Portfolio</a></li><!--
          --><li><a href="#contact" class="js-anchor-link">Contact</a></li>
        </ul>
      </nav>
      <h1 class="name">TITLE</a></h1>
    </div>
    <section id="about" class="scroll"> 
      <div class="box">

        <div class="content">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac gravida nibh. Donec et viverra leo. Sed hendrerit blandit lectus. In pretium orci tellus, porta sollicitudin mauris lobortis et. Donec at sollicitudin nisl. Cras congue elit sed dolor interdum auctor. Nunc convallis purus a vestibulum mollis. Suspendisse ac volutpat sem. Nunc in neque mollis, mattis augue tristique, ornare dolor. Morbi imperdiet tincidunt lectus at molestie. Fusce ultricies mattis maximus.</p>
        </div>
      </div>
    </section>
</body>
</html>

Upvotes: 1

Views: 1460

Answers (2)

Shirsha Ghosh
Shirsha Ghosh

Reputation: 78

It is because the top navbar is below the other pages. Put z-index in css section for navbar.

nav {
        width: 100%;
        height: 80px;
        background-color: #fff;
        line-height: 80px;
        position: fixed;
        z-index: 99
    }

Upvotes: 1

see sharper
see sharper

Reputation: 12045

The reason is that you have position:fixed on your nav content, and then, when you scroll down to the About section, the content moves up and covers the nav bar so it is no longer receiving mouse events. You can see this easily enough if you inspect the elements. You can fix it so that at least the nav items remain clickable by setting z-index: 1 on the nav container. You will have other styling issues to fix then, but it solves the immediate problem.

Upvotes: 0

Related Questions