Why is logo not rendered in bootstrap navbar dropdown item - linked page? - html

I am using Flask framework. I have few tabs (Home, About, Services and Contact) in my bootstrap navbar.
Services tab is a dropdown Tab which has a dropdown item called profile and it is linked to Profile.html template
All the templates (html files) inherits from base.html.
except Services >> Profile page, all the other pages are rendering logo as per the base.html.
Logo is not getting rendered in Services >> Profile page as shown below:
Logo getting rendered in other pages
I would like logo to be rendered in Services >> Profile page as well like all other pages (home, about and contact. Please help me resolve the issue
project structure:
base.html
<!DOCTYPE html>
<html lang="english">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="static/images/logo1.png">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
>
<link rel="stylesheet" href={{url_for('static', filename='stylesheets/style.css')}}>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div class="container-fluid">
<nav class=" navbar navbar-expand-lg navbar-light fixed-top bg-light py-lg-0 " id="customNavbar">
<a class="navbar-brand" href="/">
<!-- Add logo -->
<img src="static/images/logo1.png" alt="logo">
</a>
<button class="navbar-toggle-collapsed d-block d-sm-block d-md-none" type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="true"
aria-label="Toggle navigation"
id="togglerButton">
<span class="line"></span>
<span class="line"></span>
<span class="line" style="margin-bottom: 0;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/About"><strong>About</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<strong>Services</strong>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/Services/Profile">Create profile</a></li>
<li><a class="dropdown-item" href="#">Service 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/Contact"><strong>Contact</strong></a>
</li>
</ul>
</div>
<form class="lg-flex">
<button type="button" href="/signin" class="btn btn-custom">Sign In</button>
<button type="button" class="btn btn-custom">Sign Up</button>
</form>
</nav>
</div>
<h1>Welcome</h1>
{% block content%}
{% endblock%}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
Profile.html
{% extends 'base.html'%}
{% block title %}Profile{% endblock %}
{% block content%}
<h1> Profile Page! </h1>
{% endblock%}
routes.py
from flask import render_template, Blueprint
routes = Blueprint('routes', __name__)
#routes.route('/')
def home():
return render_template('Home.html')
#routes.route('/About')
def about():
return render_template('About.html')
#routes.route('/Services/Profile')
def profile():
return render_template('Profile.html')
#routes.route('/Contact')
def contact():
return render_template('Contact.html')
init.py (double underscores before and after init not visible here)
from flask import Flask
from .routes import routes
def create_app():
app = Flask(__name__)
app.register_blueprint(routes, url_prefix='/')
return app
main.py
from Website import create_app
app = create_app()
if __name__ == '__main__':
app.run(debug=True)


You have a direct link to the image source, so the Profile page is trying to find logo1.png in /Services/static/images/ rather than just static/images/ because of the routing as /Services/Profile.
You can use url_for to get the logo image, regardless of the page's location relative to the static folder, like you did with the stylesheet. It would look like this:
<img src="{{ url_for('static', filename='/images/logo1.png') }}" alt="logo">

Related

NoReverseMatch - Reverse for 'detail' not found. 'detail' is not a valid view function or pattern name

I want to see http://127.0.0.1:8000/bookmark/ page.
But I go there, there is an error in website.
error message is
NoReverseMatch at /bookmark/
Reverse for 'detail' not found. 'detail' is not a valid view function or pattern name.
Request Method: GET
Request URL: http://127.0.0.1:8000/bookmark/
Django Version: 3.1
Exception Type: NoReverseMatch
Exception Value:
Reverse for 'detail' not found. 'detail' is not a valid view function or pattern name.3
and my code is
[base.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}django web programming {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- 하위 html 파일에서 이 부분에 style 태그를 추가할 가능성이 있으므로 block 태그를 기입. 블록태그이름은 extra-style로 지정함 변경가능 -->
{% block extra-style %}{% endblock %}
<style>
.nav-link{
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body style = "padding-top:90px;">
<!-- home.html (4) 참고 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<span class="navbar-brand mx-5 mb-0 font-weight-bold font-italic"> Motdongsan</span>
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'home'%}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'bookmark:index'%}">Bookmark</a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'blog:index'%}">blog</a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'bookmark:index'%}">photo</a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="">Photo</a>
</li>
<li class="nav-item dropdown mx-3 btn btn-light">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Admin</a>
<a class="dropdown-item" href="#">Archive</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Search</a>
</div>
</li>
<li class="nav-item mx-3 btn ">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class ="form-inline my-2" action="" method="post"> {% csrf_token %}
<input class="form-control mr-sm-2" type="search" placeholder="global search" name="search_word">
</form>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- 본문 내용은 각 페이지마다 달라질수 있으므로 block 태그를 사용. 블록태그이름은 content -->
<div class="container bg-warning">
{% block content %}{% endblock %}
</div>
{% block footer %}{% endblock %}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c998a172fe.js"></script>
{% block extra-script %}{% endblock %}
</body>
</html>
[bookmark_detail.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Django Bookmark Detail</title>
</head>
<body>
<div id ="content">
<h1>{{object.title}}</h1>
<ul>
<li>URL: {{object.url}}</li>
</ul>
</div>
</body>
</html>
[bookmark/views.py]
from django.shortcuts import render
# Create your views here.
from django.views.generic import ListView, DetailView
from bookmark.models import Bookmark
class BookmarkLV(ListView):
model = Bookmark
class BookmarkDV(DetailView):
model = Bookmark
[boorkmark/urls.py]
from django.urls import path
from bookmark.views import BookmarkLV, BookmarkDV
app_name= 'bookmark'
urlpatterns = [
path('', BookmarkLV.as_view(), name='index'),
path('<int:pk>/', BookmarkDV.as_view(), name='detail'),
]
what should I do? please help me...
and I don't know why I just want to go bookmark site, but error code says base.html has a problem
I just move on link(http://127.0.0.1:8000/bookmark/ page.), not button in base.html
+)
this is bookmark/models.py
from django.db import models
# Create your models here.
class Bookmark(models.Model):
title = models.CharField('TITLE', max_length =100, blank =True)
url = models.URLField('URL', unique=True)
# URL : admin사이트에서 보일것
def __str__(self):
return "%s %s" %(self.title, self.url)
# return self.title
this is bookmark_list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% extends "base.html"%}
{% block title %}bookmark_list.html{% endblock %}
{% block content %}
</head>
<body>
<div id="content">
<h1> Bookmark List</h1>
<ul>
{%for bookmark in object_list%}
<li>{{bookmark}}</li>
{%endfor%}
</ul>
{% endblock %}
</div>
</body>
</html>

I think your problem is the way that you defined your url in your bookmark_list.html (the line <li>{{bookmark}}</li>). It's because you defined app_name in your urls and in this way you should change your template line to something like <li>{{bookmark}}</li>.

Django Bootstrap Dropdown Menu not working

Building my first Django app from a tutorial, following the instructions pretty much verbatim but my navbar dropdown menu is not working no matter what I try, so unable to log out or change password from the navbar.
I am very new to js, but some things I have tried:
Experimenting w different browsers (doesn't work for Safari or Chrome)
Have looked at similar questions and implemented those techniques but it's still not working (linking to js in the head, making sure to link to js/popper/bootstrap in the correct order, etc.):
django bootstrap dropdown not working
Have also attempted to create static folders in pages/static/js and pages/static/css but that looks like it may be for more advanced styling than what we're going for here.
Bootstrap template not working correctly Django
Template file/directory below. Issue is between lines 55 and 68 (div class="collapse navbar-collapse")
Thanks in advance for the help.
<!-- templates/base.html -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/\ 1.14.3/
umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAKl8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\ js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\ 6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> -->
<title>{% block title %}Newspaper App{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
{% if user.is_authenticated %}
<ul class="navbar-nav mr-auto">
<li class="nav-item">+ New</li>
</ul>
{% endif %}
<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">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
<a class="dropdown-item" href="{% url 'password_change'%}">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}"> Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ml-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
</body>
</html>

I copied your code and had the same problem but after swapping the bootstrap.js script for a different one it started working.
The problem was a backslash in the bootstraps js URL.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\ js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\ 6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
After https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/ there is \ js/bootstrap.min.js
but it should be https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js
So when we switched to the newest js it fixed the problem but that js is still valid if you fix the path.
https://getbootstrap.com/docs/4.4/getting-started/introduction/

Image from static folder doesn't appear when it is not login state [Spring MVC & Thymeleaf]

Within my home page, I am using img tag where the source is from a static folder.
<!DOCTYPE html>
<html xmlns:th="http://thymeLeaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<!-- <html xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5" xmlns:th="https://www.thymeleaf.org"> -->
<head>
<title> Home </title>
<object th:include="fragments/fragment :: css" th:remove="tag"></object>
<object th:include="fragments/fragment :: js" th:remove="tag"></object>
</head>
<body>
<nav th:replace="fragments/fragment :: navbar"></nav>
<img style="width: 100% ; background-size: cover;" th:src="#{/img/webconstruction.png}">
</body>
</html>
</body>
and this is my fragment
<head>
<title> Home </title>
<head th:fragment="css">
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
</head>
<!-- jquery, ajax, and bootstrap.js -->
<head th:fragment="js">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script th:src="#{/js/bootstrap.min.js}"></script>
</head>
</head>
<body>
<header th:fragment="navbar">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #9be3de;">
<a class="navbar-brand mb-0 h1" th:href="#{/}">SIKOPERASI</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" th:href="#{/home}">Home <span class="sr-only">(current)</span> </a>
</li>
<li sec:authorize="isAuthenticated()" class="nav-item active">
<a class="nav-link" th:href="#{/anggota}">Anggota</a>
</li>
<li sec:authorize="isAuthenticated()" class="nav-item active">
<a class="nav-link" href="#">Pinjaman</a>
</li>
<li sec:authorize="isAuthenticated()" class="nav-item active">
<a class="nav-link" th:href="#{/simpanan}">Simpanan</a>
</li>
<li sec:authorize="isAuthenticated()" class="nav-item active">
<a class="nav-link" th:href="#{/register}">Register</a>
</li>
</ul>
<!-- <button class="btn btn-outline-danger" th:text="Logout">
<a th:href="#{/logout}"></a>
</button> -->
<div sec:authorize="isAuthenticated()">
<div class="navbar-nav pull-right">
<a class="nav-link" th:href="#{/api/user}" th:text="${#httpServletRequest.remoteUser}"></a>
<!-- <div style="padding-top: 10px ; padding-right: 20px" th:text="${#httpServletRequest.remoteUser}"></div>-->
<a class="nav-item nav-link active btn btn-danger" th:href="#{/logout}">Logout</a>
</div>
</div>
<div sec:authorize="!isAuthenticated()">
<div class="navbar-nav pull-right">
<a class="nav-item nav-link active btn btn-primary" th:href="#{/login}">Login</a>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
I have looked around whether if there is an error on my understanding regarding using an image from a folder in thymeleaf, and there is nothing wrong with it. Yet this is what I got.
When I first open my localhost, it will redirect me to a not-login state like this:
As you can see, the image got an error like that. I tried to login and when I log in, the page should have been redirected to the home page that shows the authenticated fragments. However, this is what I got:
It is not something that I want. However, when I manually retype localhost:2017/home, it will redirect me to the page that I was hoping to see.
This is my websecurityconfig:
protected void configure(HttpSecurity http)throws Exception {
http
.authorizeRequests()
.antMatchers("/home").permitAll()
.antMatchers("/css/**").permitAll()
.antMatchers("/js/**").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.defaultSuccessUrl("/home")
.loginPage("/login")
.permitAll()
.and()
.logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout")).logoutSuccessUrl("/").permitAll();
}
What I want is to make the image appear when it is still not in login state and after login, it will redirect to the last image instead of the second image. This is how my folder looks like:

Well as per your configuration I can see that img path is not in permitAll list.
Which means you wont be able to access any img resource without login in.
So you see img error as described in your post.
Since your img url was last one being triggered before giving error, on login it will redirect to same url after login.
Thus you see Under Construction page.
How to resolve it?
You can add your /img path in permitAll list or atleast the one with Under Construction.
.antMatchers("/img/**").permitAll()

How do you toggle multiple data targets and toggles using bootstrap html data toggle

I am writing code for a animated hamburger icon for the bootstrap navbar, but need to toggle both the hamburger icon and the bootstrap repsonsive navbar. So is there some code or some way to toggle both pieces of data at different ids. Also, I can't use javascript because the bootstrap navbar doesn't have the sliding animation when toggling it through javascript.
Here is the code I have already for targeting the navbar collapse feature.
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="\static\base\css\hamburgers.css" rel="stylesheet">
<link href="\static\base\css\navbar.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<button class="hamburger hamburger--squeeze" height="15" id="hamburger" data-target="#collapsibleNavbar" data-toggle="collapse">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<a class=" navfont navbar-brand mx-auto" href="/account">Gucci Enterprises</a>
<div class="navshow">
{% if user.is_authenticated %}
Logout
{% else %}
<a href="/account/login" class="navfont important" >Login</a>
{% endif %}
</div>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<div class="container">
<div style="text-align: center">
{% if user.is_authenticated %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navfont" href="/account/profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/profile/edit">Edit Profile</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/change-password">Change Password</a>
</li>
</ul>
{% else %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navfont" href="/account/register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/reset-password">Reset Password</a>
</li>
</ul>
{% endif %}
</div>
</div>
</div>
<div class="navhide">
{% if user.is_authenticated %}
Logout
{% else %}
Login
{% endif %}
</div>
</nav>
<br>
{% block body %}
{% endblock %}
</body>
</html>
'''

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button class="btn btn-primary" data-toggle="collapse" data-target=".it-works">It Works</button>
<div class="collapse it-works">Yep.</div>
<div class="collapse it-works">It works.</div>
Add a class like .multi-collapse on the elements that should toggle and use data-target=".multi-collapse" with a class instead of an id. The bootstrap collapse component multiple targets documentation says you can reference them using a JQuery selector and includes a working example.

How to link navigation bar in django?

I am new to django I want to create a responsive website im using django for it, the website works fine except for one thing when the website is switched to mobile view the navigation bar is not working.
This is my urls.py
from django.conf.urls import url
from app import views
urlpatterns =[
url(r'^$',views.index,name='index'),
url(r'^about/',views.about,name='about'),
url(r'^contact/',views.contact,name='contact'),
url(r'^portfolio_project1/',views.portfolio_project1,name='portfolio_project1'),
url(r'^portfolio_project2/',views.portfolio_project2,name='portfolio_project2'),
url(r'^portfolio_project3/',views.portfolio_project1,name='portfolio_project3'),
url(r'^resume/',views.resume,name='resume'),
url(r'^portfolio/',views.portfolio,name='portfolio'),
]
This is my header section
<header role="banner" class="banner clearfix" id="banner">
<div class="section-content">
<div class="branding clearfix">
<figure id="logo"><img src="{% static "images/logo.png" %}" alt="my logo" /></figure>
<h1>Sriram</h1>
<h2>Portfolio Website</h2>
</div>
</div>
Menu
</header>
<nav role="navigation" class="nav clearfix main-nav" id="nav">
<ul class="nav-menu">
<li class="menu-item">About</li>
<li class="menu-item">Resume</li>
<li class="menu-item">Portfolio
<ul class="sub-menu">
<li class="menu-item">Project 1</li>
<li class="menu-item">Project 2</li>
<li class="menu-item">Project 3</li>
</ul>
</li>
<li class="menu-item">Contact</li>
</ul><!--/.nav-menu-->
</nav>
This is my views.py
from django.shortcuts import render
from django.http import HttpResponse
def index (request):
return render(request,'index.html')
def about (request):
return render(request,'about.html')
def contact (request):
return render(request,'contact.html')
def portfolio_project1 (request):
return render(request,'portfolio_project1.html')
def portfolio_project2 (request):
return render(request,'portfolio_project2.html')
def portfolio_project3 (request):
return render(request,'portfolio_project3.html')
def resume (request):
return render(request,'resume.html')
def portfolio (request):
return render(request,'portfolio.html')
These are the scripts linked
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="{% static "js/vendor/jquery-1.12.0.min.js" %}"><\/script>')</script>
<script src="{% static "js/plugins.js" %}"></script>
<!-- Widowtamer -->
<script src="{% static "js/vendor/widowtamer-min.js" %}"></script>
<script src="{% static "js/main.js" %}></script>
I have tested the site without using django it works fine. But if i use django when i switch to mobile view the menu button is not working everything else works fine.

To solve this ...
in your main.html (other people choose to call it base.html) reference this Django template tag in the head tag session:
{% include "navbar.html" %}
and the navigation bar will appear on all your website session

Recommend watching this series for learning Django. https://www.youtube.com/playlist?list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW
To make a nav bar with bootstrap
Add this starter Template to base.html
Next Add this to the top of the body
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>`
Source https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
If you didn't find the starter template in this link
Then here is the code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
When you're done Your code should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>BASE</title>
</head>
<body>
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'link1' %}">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link2' %}">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link3' %}">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link4' %}">Link 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'link5' %}">Link 5</a>
</li>
</ul>
</nav>
{% block content %}
Replace Me!
{% endblock %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

I created an HTML "navbar.html" containing my navbar code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Qina Smart Map</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={%url "home"%}>Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href={%url "admin"%}>Admin</a>
</li>
<li class="nav-item">
<a class="nav-link " href={%url "about"%}>About</a>
</li>
</div>
</nav>
then I used this tag in my HTML files
{%include 'navbar.html'%}
my url.py
urlpatterns = [
url(r'^$', qinaschools.views.home, name='home'),
path('about/', qinaschools.views.about, name='about'),
url(r'^qinaschools_dataset/$', qinaschools_dataset, name='qinaschools'),
path('admin/', qinaschools.views.admin, name='admin'),
]