Hamburger Menu Opens But Wont Close - html

I have html for my website below. With the code below, I can open the hamburger menu, but it won't close. I've seen posts saying the issue is html structuring, but when I run this through a validator I get no errors. I also don't see anything that jumps out as being wrong with my use of bootstrap. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/86461d8b85.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand me-4" href="/"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
<a class="nav-item nav-link" href="{{ url_for('description') }}">Docs</a>
<a class="nav-item nav-link" href="{{ url_for('terms') }}">Terms and Conditions</a>
{% if current_user.is_authenticated %}
<a class="nav-item nav-link" href="{{ url_for('select_game') }}">example</a>
<a class="nav-item nav-link" href="{{ url_for('redeem') }}">example</a>
<a class="nav-item nav-link" href="{{ url_for('log') }}">example</a>
<a class="nav-item nav-link" href="{{ url_for('feedback') }}">Contact Us</a>
<a class="nav-item nav-link" href="{{ url_for('acc') }}">Account</a>
<a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>
{% else %}
<a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
<a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>
{% endif %}
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav ms-auto">
{% if current_user.is_authenticated %}
<a class="nav-item nav-link" href="{{ url_for('acc') }}">Balance: ${{ account_balance }}</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<main class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
<p>{{ message }}</p>
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
</body>
</html>


I have discovered that the problem is the first script and the seconds script are the same despite the different links. When comment out the second one on line 6, the collapse worked.

Related

navbar active link not working with real link

I have been tried all day to make the link active when I click on it but it only works with a href that is "fake" but not with my href. In the example code, it works for Research but not for Upload.
<li class="nav-item">
<a class="nav-link" href="{{ url_for('uploader.upload') }}">Upload</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li>

ended up working, turned out jquery and bootstrap were not in sync
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('main.index') }}">Hazen</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
{% if not current_user.is_anonymous %}
<a class="nav-item nav-link {% if display_page=='index' %} active{%
endif %}" class="nav-item nav-link" href="{{ url_for('main.user',
username=current_user.username) }}">Dashboard</a>
<a class="nav-item nav-link {% if display_page=='upload' %} active{%
endif %}" href="{{ url_for('uploader.upload') }}">Upload</a>
{% endif %}
{% if current_user.is_anonymous %}
<a class="nav-item nav-link" href="{{ url_for('auth.login')
}}">Login</a>
{% else %}
<a class="nav-item nav-link" href="{{ url_for('auth.logout')
}}">Logout</a>
{% endif %}
</div>
</div>
</nav>

Why is my bootstrap toggler not toggling?

I have followed the instructions and included the javascript packages into my file. However, whenever I click the toggle button, it does not toggle at all, why is that so? Does it have something to do with the version of my packages?
I have included some Django templating syntax, do ignore those
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="{% static 'investing/layout.css' %}" />
{% block script %}
{% endblock %}
</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggle-label">Menu</span>
<span class="sr-only">(toggle)</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-lg-0">
<li class="nav-item mt-auto">
<a class="nav-link active" aria-current="page" href="#">Home</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">
Features
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Fundamental Analysis</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="d-flex ml-5">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success ml-2" type="submit">Search</button>
</form>
</div>
</div>
</nav>
{% block body %}
{% endblock %}
<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+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

you are using bootstrap 5 syntax data-bs-toggle
but you using bootstrap 4 change data-bs-toggle to data-toggle
Check out the bootstrap 4 documentation
https://getbootstrap.com/docs/4.6/components/dropdowns/
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="{% static 'investing/layout.css' %}" />
{% block script %}
{% endblock %}
</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<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-toggle-label">Menu</span>
<span class="sr-only">(toggle)</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-lg-0">
<li class="nav-item mt-auto">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
Features
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Fundamental Analysis</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="d-flex ml-5">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success ml-2" type="submit">Search</button>
</form>
</div>
</div>
</nav>
{% block body %}
{% endblock %}
<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+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap dropdown and Hamburger collapse not working

I can't seem to get my navbar dropdown or hamburger collapse to work. They both show up, but no actions occur when I click on either of them. I have jQuery, popper, and bootstrap js at the bottom in (I believe) the correct order, I'm not sure what else I can do.
I also do not have any conflicting css code that interacts with any id's on the navbar.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yoon Family Cookbook</title>
<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">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<script src="https://kit.fontawesome.com/99822d1753.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">Yoon Family Cookbook</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
{% if request.user.is_authenticated %}
<a class="nav-link active" aria-current="page" href="{% url 'add_recipe' %}">Add Recipe</a>
{% endif %}
</li>
</ul>
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
{% if request.user.is_authenticated %}
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Hello, {{request.user.first_name}}</span>
</a>
<div class="dropdown-menu dropdown-menu-right" id="dropdown-content" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">Log Out</a>
{% else %}
<a class="login-button" href = "{% url 'login' %}">Login</a>
{% endif %}
</li>
</ul>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
</body>
</html>

First of all, you are using css and js from two different versions:
4.3.1/css/bootstrap.min.css
3.4.1/js/bootstrap.min.js
Pick one version and use the same for both.
Secondly, your html structure is incorrect. The nav.navbar should be inside the div.container-fluid.
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
...
</nav>
...
</div>
...
</body>

Bootstrap 4: DropDown menu doesn't function EDIT: IN firefox

I am practicing django frameworks. I Don't have much experience with front-end development But I've already work with bootstrap 4 and implement dropdown menu but I couldn't make this work.
I've already checked cdn and misspelling in classes but couldn't find the problem
<!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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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 dropdown">
<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>
<!-- 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+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4\
YfRvH+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+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/\
JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
All cdn are in order:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"\ integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4\
YfRvH+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+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/\
JmZQ5stwEULTy" crossorigin="anonymous"></script>
EDIT: I mean dropdown menu inside if statement
EDIT: The problem was with firefox . It is working with google chrome

Django not showing templates other than base.html

I am having trouble seeing changes made to any template that isn't base.html. I am currently trying to make changes to the homepage, but changes aren't showing in Chrome. I have the cache disabled in Chrome. This was working for me a few days ago, and I haven't made any changes to URLS or VIEWS.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale="1">
<title>
</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/navbar.css' %}">
</head>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'images/king.png' %}" alt="King's Designs">King's Designs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% if user.is_authenticated %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Hello, {{user.username}}</a>
</li>
<button type="submit" class="btn btn-success" href="{% url 'signup' %}">Sign Up</button>
</ul>
{% else %}
<ul class="navbar-nav">
<li class="nav-item">
Log In
</li>
<li class="nav-item">
<button href="{% url 'signup' %}" class="btn btn-success">Sign Up</button>
</li>
</ul>
{% endif %}
</div>
</nav>
</header>
<body>
</body>
</html>
{% extends 'base.html' %}
{% load static %}
{% block content %}
<body>
<h1>helloooooo</h1>
</body>
{% endblock content %}

Remove the body tag from the all the templates except base.html.The files should look like this
{% extends 'base.html' %}
{% load static %}
{% block content %}
<h1>helloooooo</h1>
{% endblock content %}
Your base.html file should look like this:
<html>
<head>Something
<title>Sometitle</title>
<!--Any CSS files-->
</head>
<body>
{% block content %}
{% endblock content %}
<!--Any JS files-->
</body>
</html>