My Django Landing page includes multiple extra description pages.
The navbar is stored in the base.html file using bootstrap 4 scrollspy, which directs to IDs on the home.html page. On the home page, it functions as shown in the official Bootstrap example.
1.ERROR
However, when navigating to other pages, the URL displays "" but remains under the URL "".
An ERROR message in the terminal also appears:
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 explored:
- Bootstrap scrollspy when accessing from another page, which pertains to Bootstrap 3
- and Twitter Bootstrap Scrollspy not working at all, relating to an older version of Bootstrap (+6 years old)
2.ERROR
In the original example, the highlighted area where the navbar sends users is not highlighted in my case.
3. ERROR
The navbar does not stay at the top when scrolling or clicking on any of the navbar elements.
When I attempt to implement any changes, it covers the first few lines of the page. To keep the navbar above these lines, I include the line of code:
<div class="godown-60" id="godown"></div>I have tried adding classes like "fixed-top", "sticky-top":
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>
...