CODEWITHSUNDEEP
javascripthtmljquerycss
user2734272
user2734272

Reputation: 11

My Nav bar will not allow me to scroll up

I have a fixed nav bar which operates fine when scrolling down and up from section elements 1 and 2. The issue is when it get to section 3 of my contacts it will not scroll up to any of the other sections. Also Once the nav bar reaches section 3 it cant be selected. Please help 😬

<body class="text-center" style="background-color: #32e0c4;">

  <div id="section1" class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
    <header class="masthead mb-auto">
      <div class="inner" style="">

        <nav class="nav nav-masthead navbar-fixed-top" id="myNavbar">
          <a class="nav-link " href="#section1">Home</a>
          <a class="nav-link" href="#section2">Skillz</a>
          <a class="nav-link" href="#section3">Contact</a>
          <a class="nav-link dropdown dropdown-toggle" data-toggle="dropdown" href="#">Projects</a>

        </nav>

      </div>
    </header>

    <main style="margin-top:50px" role="main" class="inner cover">
      <h1 class="cover-heading">Hi I'm Shonte</h1>
      <h2 class="cover-heading"> A web developer</h2>

      <img class="shonprofile rounded-circle profilecenter " style="" src="images/shonblue2.png" alt="" width="300" height="300">


    </main>


  </div>

  <div id="section2" class="skillRow  container-fluid">
    <h1>Skills</h1>
    <div class="row">

      <div class="col-md-7 skillability">
        <p>HTML ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>CSS ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>JavaScript ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>Bootstrap ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>Nodejs ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>SQL ⭐️⭐️⭐️⭐️</p>
        <br>
        <p>MongoDB ⭐️⭐️⭐️⭐️</p>
        <br>
        <p style="margin-bottom:10px">Mongoose ⭐️⭐️⭐️⭐️</p>


      </div>
      <div class="col-sm-3" style="margin-top:50px">
        <img src="images/laptop.png" alt="">
      </div>

    </div>

  </div>

  <div id="section3" class="container-fluid" style="background-color:#32e0c4 ">

    <form class="center_div">

      <div class="form-row">
        <h1 class="col-md-12" style="margin-top:20px">Contact Me</h1>
        <div class="form-group col-md-12" style="padding-top: 10px">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group col-md-12">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>

      </div>
      <button type="submit" class="btn btn-primary" style="margin-bottom:10px">Submit</button>

    </form>
  </div>

  <div id="section4" class="container-fluid section4">

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="index.js" charset="utf-8"></script>

  </script>

</body>

</html>

$(document).ready(function() {

$('body').scrollspy({ target: ".navbar", offset: 50 });

$("#myNavbar a").on('click', function(event) {

if (this.hash !== "") {

  event.preventDefault();

  var hash = this.hash;

  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 800, function() {

    window.location.hash = hash;
  });
}

}); });

Upvotes: 0

Views: 39

Answers (1)

stanlagtan
stanlagtan

Reputation: 45

You should try to put your navbar out of any section.

    <nav class="nav nav-masthead navbar-fixed-top" id="myNavbar">
           <a class="nav-link " href="#section1">Home</a>
          <a class="nav-link" href="#section2">Skillz</a>
          <a class="nav-link" href="#section3">Contact</a>
          <a class="nav-link dropdown dropdown-toggle" data-toggle="dropdown" 
href="#">Projects</a>
</nav>

    <div id="section1" class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        ...
    </div>

to be sure that it can be clickable and visible from any section you can change the z-index by making it the highest of the page.

Upvotes: 0

Related Questions