Bootstrap 4 Navbar Scrollsy ERRORs

Question

I have a Django Landing page + few extra description pages.

I store the navbar with bootstrap 4 scrollspy in the base.html file what points on IDs on the home.html. When I am on the home page it works like in the official bootstarp example.

1.ERROR

But when I go to other pages it just puts this URL out "http://127.0.0.1:8000/home/services/#pricing" and stay under the "http://127.0.0.1:8000/home/services/" URL.

I get a terminal ERROR message as well:

Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[13/Jan/2020 16:16:35] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509

I have seen:

Bootstrap scrollspy when accessing from another page but this is bootstrap 3
and Twitter Bootstrap Scrollspy not working at all and this one is some very old version of bootstrap (+6 years ago)

2.ERROR

In the original example the navbar area where it send the user is highlighted. Mine not highlighted at all.

3. ERROR

The navbar not stay on the top when I scroll or go to any of the navbar elements by clicking on them.

If I implement any of the following than it covers the first few lines of the page. To keep the navbar above these lines I use <div class="godown-60" id="godown"></div> lien of code.

I have tried class=" ":

Fixed navbar 
fixed-top 
sticky-top

base.html

<body>
  <header>
    <nav id="navbar-example2" class="navbar navbar-static-top navbar-light bg-light">
      <a class="navbar-brand" href="{% url 'home' %}" > HOME PAGE </a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#services">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#pricing">Pricing</a>
        </li>
      </ul>
    </nav>
...

home.html

<body>
  <div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
    <h4 id="about">About</h4>
      <a href="{% url 'about' %}">AboutTest</a>
    <p>...</p>
    <h4 id="services">Services</h4>
      <a href="{% url 'services' %}">ServicesTest</a>
    <p>...</p>
    <h4 id="pricing">Pricing</h4>
      <a href="{% url 'pricing' %}">PricingTest</a>
    <p>...</p>
  </div>
...

score 0 · Accepted Answer · answered Jan 21 '20 at 12:08

This example have solved ERROR 1 and 3 (2 wasn't that important) https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/#

ERROR 1 solution, bey using specified address (these can be actual URL's on the site or libraries as well)

href="home/help/#main"

<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="">
  <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">

  <title>Fixed top navbar example for Bootstrap</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/">

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

  <!-- Custom styles for this template -->
  <link href="navbar-top-fixed.css" rel="stylesheet">
</head>


<body>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-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="home/help/#main">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <!-- this solves ERROR 3 -->
  <!-- having a separated section -->
  <main role="main" class="container">
    <div class="jumbotron">
      <h1>Navbar example</h1>
      <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
      <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
    </div>
  </main>
  <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXX -->

  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
  <script src="../../assets/js/vendor/popper.min.js"></script>
  <script src="../../dist/js/bootstrap.min.js"></script>
</body>


</html>

Bootstrap 4 Navbar Scrollsy ERRORs

1 Answers1