Twitter Bootstrap Question posted in

Sticky navbar only is sticky for first section of page-Twitter bootstrap

So I am creating a bootstrap website. It is supposed to be a one-page website and I have a navar at the top. My navbar is only sticky for the first section and then it just entirely disappears. How do I make it continue to stay sticky so that when I scroll through the entire page comes along at the top?

Here is my current code:

body,
td,
th {
  font-family: muli;
  font-style: normal;
  color: #000000;
}

body {
  min-height: 100%;
  width: 100%;
  argin-left: 0px;
  background-image: url();
  background-color: #FFFFFF;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Group</title>

  <!-- Bootstrap Core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom Fonts -->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="css/stylish-portfolio.min.css" rel="stylesheet">


  <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
  <script>
    var __adobewebfontsappname__ = "dreamweaver"
  </script>
  <script src="http://use.edgefonts.net/muli:n4:default.js" type="text/javascript"></script>

</head>

<body marginwidth="200px" id="page-top">

  <!-- Navigation -->
  <header class="header sticky-top">
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
      <a class="navbar-brand" href="#"><img src="img/MBGlogo.svg" width="200" height="50" alt=""></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="border-radius:30px">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Get Involved</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Career Fair</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Ideation</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Jobs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Sponsor</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <!-- Header -->
  <header class="masthead d-flex">
    <div class="container text-center my-auto">
      <h6 style="font-size:25px; letter-spacing:2px; color: white">CLUB</h6>
      <h1 style="font-size:85px; color:white">Industry</h1>
      <pre> </pre>
      <a class="btn btn-primary btn-M js-scroll-trigger" href="#get-involved">Get Involved</a>
    </div>
    <div class="overlay"></div>
  </header>

  <!-- About -->
  <section class="content-section bg-primary text-white text-center" id="about">
    <div class="container text-center">
      <div class="content-section-heading">
        <h2 class="mb-5">Vision</h2>
        <h4 style="font-weight:normal">business</h4>

        <h4 style="font-weight:normal">careers</h4>
      </div>
    </div>
  </section>

  <!-- Portfolio -->
  <section class="content-section" id="portfolio">
    <div class="container">
      <div class="content-section-heading text-center">
        <h3 class="text-secondary mb-0">Portfolio</h3>
        <h2 class="mb-5">Recent Projects</h2>
      </div>
      <div class="row no-gutters">
        <div class="col-lg-6">
          <a class="portfolio-item" href="#">
            <span class="caption">
                  <span class="caption-content">
                    <h2>Stationary</h2>
                    <p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p>
                  </span>
            </span>
            <img class="img-fluid" src="img/portfolio-1.jpg" alt="">
          </a>
        </div>
        <div class="col-lg-6">
          <a class="portfolio-item" href="#">
            <span class="caption">
                  <span class="caption-content">
                    <h2>Ice Cream</h2>
                    <p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p>
                  </span>
            </span>
            <img class="img-fluid" src="img/portfolio-2.jpg" alt="">
          </a>
        </div>
        <div class="col-lg-6">
          <a class="portfolio-item" href="#">
            <span class="caption">
                  <span class="caption-content">
                    <h2>Strawberries</h2>
                    <p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p>
                  </span>
            </span>
            <img class="img-fluid" src="img/portfolio-3.jpg" alt="">
          </a>
        </div>
        <div class="col-lg-6">
          <a class="portfolio-item" href="#">
            <span class="caption">
                  <span class="caption-content">
                    <h2>Workspace</h2>
                    <p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p>
                  </span>
            </span>
            <img class="img-fluid" src="img/portfolio-4.jpg" alt="">
          </a>
        </div>
      </div>
    </div>
  </section>
  <!-- Footer -->
  <footer class="footer text-center">
    <div class="container">
      <ul class="list-inline mb-5">
        <li class="list-inline-item">
          <a class="social-link rounded-circle text-white mr-3" href="mailto: [email protected]">
            <i class="icon-envelope"></i>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="social-link rounded-circle text-white mr-3" href="#">
            <i class="icon-social-twitter"></i>
          </a>
        </li>
      </ul>
      <p class="text-muted small mb-0">Copyright &copy;2020</p>
    </div>
  </footer>

  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
    <i class="fas fa-angle-up"></i>
  </a>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Plugin JavaScript -->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for this template -->
  <script src="js/stylish-portfolio.min.js"></script>

</body>

</html>
Tags:

2

Answers


  1. 0

    You can remove the sticky-top class and just add header{position:sticky;} in css as there is some particular javascript which hides your header after first section.

    Login or Signup to reply.
  2. 0

    Add ‘fixed-top’ in the nav tag
    and remove the ” sticky-top” from header tag

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search