I tried to put 2 links in 1 tab but wasn't really successful here i is my navbar code:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<title>{% block title %} welcome to music stories{% endblock %}</title>
</style>
</head>
<body>
{% if user.is_authenticated %}
<div class='alert alert-success alert-dismissible fade show'>
<button type= 'btn' class="btn-close" data-bs-dismiss='alert'></button>
<p>{{user.username}}, welcome to music stories world</p>
</div>
{% else %}
<div class="alert alert-danger alert-dismissible fade show">
<button type="btn" class="btn-close" data-bs-dismiss='alert'></button>
Log In
</div>
{% endif %}
Home
<nav class="navbar text-dark bg-warning container-fluid">
<ul class="nav nav-tabs">
{% if user.is_authenticated %}
<li class="nav-item">
<a class='nav-link active' href="#">{{user.username}}</a><br>
<a class="nav-link" href=" {% url 'user:logout' ">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class='nav-link active' href="{% url 'login' %}"> Log In</a>
<a class="nav-link" href="{% url 'users:signup'%}">Sign Up</a>
</li>
{% endif %}
`<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle='dropdown' href="tags">tags</a>
<ul class="dropdown-menu">
<li><a class="nav-item" href="#">tag1</a></li>
<li><a class='nav-item' href="#">tag2</a></li>
<li><a class="nav-item" href="#">tag3</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link">communication</a></li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages:musiclist' %}">music list</a>
</li>
<li class="nav-item">
<a class='nav-link' href="{% url 'pages:music_create' %}">add</a>
</li>
</ul>
</nav>
<div>
{% block content %}{% endblock %}
</div>
</body>
</html>
i wanted to put both username and logout both in 1 tab or login and logout ,how can i put 2 link in 1 tab to act like 1 tab?
i had a second question that is not related to topic but can i override .container of <body> in <nav>.
based on what I understood from your explanation is that you can use a DROPDOWN that contains username and logout (check this link).
about overriding the container class, the better solution is to add a class, with a different name like; container-main, in your css file with what you wish to be like and add it to you div.
Related
Good afternoon everyone, I have some issues with Bootstrap. I would like to get two buttons "Log In" and "Sign Up" at the right of the page but they are still at the left while I mention class="text-end" which is supposed to align my buttons to the right. Anyone could have an idea, I am stuck.
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}Newspaper App{% endblock title %}</title>
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<header class="p-3 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center
justify-content-lg-start">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
{% if user.is_authenticated %}
<li>+ New</li>
</ul>
<div class="dropdown text-end">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1"
data-bs-toggle="dropdown" aria-expanded="false">
{{ user.username }}
</a>
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="{% url 'password_change'%}">
Change password</a></li>
<li><a class="dropdown-item" href="{% url 'logout' %}">Log Out</a></li>
</ul>
</div>
{% else %}
<div class="text-end">
<a href="{% url 'login' %}" class="btn btn-outline-primary me-2">Log
In</a>
Sign Up
</div>
{% endif %}
</div>
</div>
</header>
<main>
{% block content %}
{% endblock content %}
</main>
</div>
<!-- Bootstrap JavaScript Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>[enter image description here](https://i.stack.imgur.com/19L7D.png)
I read the documentation, tried to reinstall some packages but I don't know what to do anymore.
Thanks in advance, have a nice week.
I am building a web app that has an interactive map of venues in my hometown. The app is written in Django and the map itself is built using Folium, then is saved as map.html and rendered in a template as follows:
{% extends "venues/layout.html" %}
{% block body %}
{% include 'venues/map.html' %}
{% endblock %}
The layout.html file simply has a bootstrap navbar:
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="navbar-default">
<a class="navbar-brand" href="/">CultureMapMilano</a>
<div>
<ul class="navbar-nav mr-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link"
href=""><strong>{{ user.username }}</strong></a>
</li>
{% endif %}
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'register' %}">Register</a>
</li>
{% endif %}
</ul>
</div>
</nav>
{% block body %}
{% endblock %}
<script src="" async defer></script>
</body>
The issue. When I click on the map the navbar simply disappears. It's still there in the DOM but it's behind the map.
I assume it's a problem I could fix with css but I don't know how to (adding a high z-index to the navbar didn't help).
Interestingly putting the %include% inside a means the map just doesn't show - no idea why.
Can someone suggest a way to fix this or a workaround?
Found the answer: just add a height property set to e.g. 90% when generating the Folium map.
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>.
i have 3 files, Base.html, Navbar.html and dashboard.html. im trying to extend base.html and include navbar.html in dashboard. its getting extended but the problem is then dashboard's content data is not visible. If i remove navbar.html it works but no navbars. Below are the files pls check and help to resolve.
Navbar.html
{% load static %}
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<div class="dropdown-divider"></div>
</ul>
# Side configutarion
{# <li class="nav-item">#}
{# <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">#}
{# <i class="fas fa-th-large"></i>#}
{# </a>#}
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="dashboard" class="brand-link">
<img src="{% static 'img/AdminLTELogo.png' %}" alt="AdminLTE Logo"
class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">Acro Paints</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="{% static 'img/user2-160x160.jpg' %}" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
Alexander Pierce
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
data-accordion="false">
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
</p>
</a>
<li class="nav-item">
<a href="pages/widgets.html" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Painters
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Product Master
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-chart-pie"></i>
<p>
Scheme
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-tree"></i>
<p>
Coupon Code Master
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>
Reward Master
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-table"></i>
<p>
Redemption
</p>
</a>
</li>
<li class="nav-item">
<a href="pages/calendar.html" class="nav-link">
<i class="nav-icon far fa-calendar-alt"></i>
<p>
Passbook
</p>
</a>
</li>
<li class="nav-item">
<a href="pages/gallery.html" class="nav-link">
<i class="nav-icon far fa-image"></i>
<p>
SMS Logs
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-envelope"></i>
<p>
Stake Holders
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-book"></i>
<p>
Dealer Master
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-plus-square"></i>
<p>
Beat Plan
</p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Compliance</p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Tickets</p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Leads</p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Notification</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Dashboard</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
</div>
<aside class="control-sidebar control-sidebar-dark">
Base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
<link rel="stylesheet"
href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet"
href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-
4.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css'
%}">
<link rel="stylesheet" href="{% static 'plugins/jqvmap/jqvmap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/adminlte.min.css' %}">
<link rel="stylesheet" href="{% static
'plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
<link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.css' %}">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700"
rel="stylesheet">
</head>
<body>
<div class="wrapper">
{% include 'navbar.html' %}
{% block content %}
{% endblock %}
</div>
</body>
<script src=" {% static 'plugins/jquery/jquery.min.js' %} "></script>
<script src=" {% static 'plugins/jquery-ui/jquery-ui.min.js' %} "></script>
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<script src=" {% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %} "></script>
<script src=" {% static 'plugins/chart.js/Chart.min.js' %} "></script>
<script src=" {% static 'plugins/sparklines/sparkline.js' %} "></script>
<script src=" {% static 'plugins/jqvmap/jquery.vmap.min.js' %} "></script>
<script src=" {% static 'plugins/jqvmap/maps/jquery.vmap.usa.js' %} "></script>
<script src=" {% static 'plugins/jquery-knob/jquery.knob.min.js' %} "></script>
<script src=" {% static 'plugins/moment/moment.min.js' %} "></script>
<script src=" {% static 'plugins/daterangepicker/daterangepicker.js' %} "></script>
<script src=" {% static 'plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-
4.min.js' %} "></script>
<script src=" {% static 'plugins/summernote/summernote-bs4.min.js' %} "></script>
<script src=" {% static 'plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' %}
">.
</script>
<script src="{% static 'js/adminlte.js' %} "></script>
<script src="{% static 'js/pages/dashboard.js' %} "></script>
<script src="{% static 'js/demo.js' %} "></script>
</html>
dashboard.html
{% extends 'base.html' %}
{% block content %}
<p>Hello </p>
{% endblock %}
You can put your navbar in your base.html also like the way i did here https://github.com/YashMarmat/Blog-App-django-v3/blob/master/templates/base.html
after that, place below code at the top of those templates where you wish to include your navbar
{% extends "base.html" %}
Now, place the code of other templates between these two code,
{% block content %}
{% endblock content %}
For example, home.html (other templates should look like below),
{% extends "base.html" %}
{% block content %}
<h1>Hello World !</h1>
{% endblock content %}
that's it.
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.