As a beginner in HTML and Flask, I am attempting to create a navbar. However, I am encountering an issue with the hamburger button not functioning properly. When I resize the window smaller, the hamburger button appears but does not show the items like "Login," "Home," or "Sign Up" when clicked.
/*Any color-related styles are defined in this CSS file */
/*body, paragraphs, etc*/
* {
margin: 0px;
padding: 0px;
font-family: 'Genos', sans-serif;
}
/*background color*/
body{
background-color: #beeaa9 !important;
}
.navbar-dark .navbar-nav .nav-link {
color:white;
}
/*Navbar color*/
.bg-custom-1{
background-image: linear-gradient(90deg,#5ae958 35%, #58e9af 100%) !important;
}
/*Navbar toggler color*/
/*
.navbar .fas{
color: rgb(30, 47, 47)!important;
font-size: 26px;
}
*/
/*Margin-right, font size*/
.navbar-nav{
text-align: right;
margin-right: 20px;
font-size: 20px;
}
.bg-custom-1 .navbar-toggler{
padding-right: 20px;
outline: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.united.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">
<link rel="stylesheet" href=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css>
<title>Bank App Web</title>
</head>
<body>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<div class="header">
<nav class="navbar navbar-expand-lg navbar-dark bg-custom-1">
<a class=navbar-brand href=""><img src="{{ url_for('static', filename='img/logo.png')}}"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"></button>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('main') }}">Home </a>
</li>
<li class="nav-item" >
<a class="nav-link" href="{{ url_for('first') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('first') }}">Sign Up</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>The HTML and CSS files are provided above! If anyone can help me figure out why it's not appearing as expected, I would greatly appreciate it!