Dear all,
I am having a problem of making a menu style like this sample:
w3school bootstrap compay
when user scroll down the web page, the menu item will change bg-color corresponding to the current section user is reading.
This is the copy code I used in my code:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
The index.html aslo use sections as the online sample:
<!-- Container (About Section) -->
<div id="about" class="container-fluid">
<!-- Container (Services Section) -->
<div id="services" class="container-fluid text-center">
donot know how to change the code to work with django.
Please help me out.
Thanks in advance.
I’m not clear what you’re trying to do - you’ll have to try explaining again in more detail. But it sounds more like a front- end issue rather than anything Django specific. Also note that the theme you link to uses Bootstrap 3 which is very old.
Having said that, note that you haven’t closed the single quotes around the URL names in these lines:
Thank you Philgyford.
is it a problem that the django use old version bootstrap?
I am facing a problem that to build a navi bar like this online sample:
so when user scroll down to the section, for example: section: services, then the menu item supposed to be changed bg-color. if change to scroll down or up to another section, the corresponde menu item will be changed bg-color.
I have few files:
nav.html
base.html
index.html
style.css
The index.html do as usual:
<!-- Container (About Section) -->
<div id="about" class="container-fluid">
<!-- Container (Services Section) -->
<div id="services" class="container-fluid text-center">
The nav.html:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
my problem is when i scoll down the web page, the nav item doesn’t change bg-color.
but when I click the menu item, the web page does move to the correcsponde section.
The problem is the menu style does not work.
does it has something to do with the old version of bootstrap?
It’s impossible for me to know what’s wrong based on this I’m afraid. You’ll need to make sure you’ve included everything that’s in the sample you linked to. I would try getting the sample working in your template, and only then change one thing at a time to add your content.
sure,
nav.html
{% block navbar %}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#1">about</a></li>
<li><a href="#2">service</a></li>
<li><a href="#3">price</a></li>
<li><a href="#5">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
{% endblock %}
base.html:
{% include 'nav.html' %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com -->
<title>{% block title %}{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
{% block content %}
{% endblock %}
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
</footer>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
})
</script>
</body>
</html>
type or paste code here
index.html
{% extends 'base.html' %}
{% load static %}
{% block navbar %}
{% endblock %}
{% block content %}
<!-- Video Section -->
<div class="jumbotron text-center">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/rk5rCSC9xVA?playlist=rk5rCSC9xVA&loop=1&autoplay=1&mute=1&start=40"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
</div>
<!-- Container (about Section) -->
<div id="1" class="container-fluid bg-grey ">
<div class="row">
<div class="col-sm-12 text-center">
<h2>about</h2>
<h4>Learn <small>&</small> practice <b class="orange_text">164</b> street signs </h4>
</div>
</div>
</div>
<!-- Container (service) -->
<div id="2" class="container-fluid bg-grey">
<div class="text-center">
<h2>service</h2>
</div>
</div>
<!-- Container (Pricing Section) -->
<div id="3" class="container-fluid">
<div class="text-center">
<h2>price</h2>
</div>
</div>
<!-- Container (Contact Section) -->
<div id="4" class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
</div>
{% endblock %}
I just found out the techincal tearm is name scrollspy
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
It doesn’t work in my project.
To start with, you’re including your nav.html before the html document has started. It should be within the <body> element.
1 Like
To reinforce what was said earlier, this is a css/js issue and doesn’t have anything directly to do with Django. Django doesn’t care what version of Bootstrap you are using, or what work you’re doing in the front end.
If you’re having problems getting this to work in Django, you might want to see if you can get this working outside of Django first. Set up a static page that can be loaded by the browser with this feature enabled, and get it working there. Then, implement it within Django.
Thank you. It’s works now
I did that too. but it did not work. I thought it has something to do with url.