I've been using bootstrap 4.3.1 for a laravel project and everything is working good but the bottom navigation bar that I'm using, expanded once, does not want to collapse back while in mobile view.
As soon as I click the collapse button, code changes into being collapsed and then instantly goes back to being expended.
What could be the issue here?
Here's the code for the navigation bar:
<nav class="navbar fixed-bottom navbar-expand-lg navbar-light">
<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 m-auto">
<a class="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/posts">Blog</a>
<a class="nav-item nav-link" href="/services">Service</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li>Create Post</li>
<li>{{ Auth::user()->name }} <span class="caret"></span></li>
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" class="nav-item nav-link">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</li>
#endguest
</ul>
</div>
</nav>
Here's the HTML output of the above code from the browser:
<nav class="navbar fixed-bottom navbar-expand-lg navbar-light">
<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 m-auto">
<a class="nav-item nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/posts">Blog</a>
<a class="nav-item nav-link" href="/services">Service</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="http://laravel.build/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://laravel.build/register">Register</a>
</li>
</ul>
</div>
</nav>
Content of my head tag:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Google Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
Aside from the code above, I also have bootstrap related scripts near the end of the body tag:
<!-- Bootstrap JS, Popper.js and jQuery -->
<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>
Some times it happens when you include bootstrap twice. Check your js files where bootstrap.js is referenced. Or include it globaly in webpack.mix.js documentation
Related
I have this bootsrap navBar, when i resize the window the navbar is shrunk and displays the hamburger, however when i click the hamburger the links aren't shown.
this is the code:
<div class="fixed-top">
<nav class="navbar navbar-dark navbar-expand-lg cusSticky" style="background-color: #000000b3;">
<!-- Navbar content -->
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'front:index' %}"><img class="image-responsive"
src="{% static 'front/images/logo2.png' %}"
alt="404"
style="position: relative; max-width: 268px; margin-left:100px;"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0"
style="display: flex; margin-right: 50; margin-left:500px; text: white;">
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:index' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:about' %}">About</a>
</li>
<li class="nav-item active">
<a class="nav-link"
href="{% url 'front:portfolio' %}">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:contact' %}">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link"
href="{% url 'front:calendar' %}">Calendar</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'user_area:loading'%}">
<i class="fa fa-user" aria-hidden="true"></i>
{% if user.is_authenticated %}
User Area - {{ user.first_name}}
{% else %}
Login
{% endif %}</a></li>
</ul>
</div>
</div>
</nav>
</div>
I feel like i am missing something but i can't figure it out.
Instead of data-bs-toggle and data-bs-target use data-toggle and data-target.I solved your problem with the toggler, the rest is up to you... Work on your code! It leaves a lot to be desired ... ;-) Good Luck !
<!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://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<title>Bootstrap 4.6 Navbar with toggler</title>
</head>
<body>
<div class="fixed-top">
<nav class="navbar navbar-dark navbar-expand-lg cusSticky" style="background-color: #000000b3;">
<!-- Navbar content -->
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'front:index' %}"><img class="image-responsive" src="{% static 'front/images/logo2.png' %}" alt="404" style="position: relative; max-width: 268px; margin-left:100px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0" style="display: flex; margin-right: 50; margin-left:500px; text: white;">
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:index' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:about' %}">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:portfolio' %}">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:contact' %}">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:calendar' %}">Calendar</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'user_area:loading'%}">
<i class="fa fa-user" aria-hidden="true"></i> {% if user.is_authenticated %} User Area - {{ user.first_name}} {% else %} Login {% endif %}</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>
It doesn't look as though you have any dropdown-menu's inside the main navbar-nav list. Copy this for as many dropdown's as you need.
<ul class="navbar-nav">
<!-- Dropdown Start -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button"
data-toggle="dropdown" aria-expanded="false">
MAIN DROPDOWN BUTTON
</a>
<ul class="dropdown-menu" aria-labelledby="servicesDropdown">
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 1</a></li>
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 2</a></li>
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 3</a></li>
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 4</a></li>
</ul>
</li>
<!-- Dropdown End -->
</ul>
I have been using bootstrap in projects very smoothly, but then in one angular project, its navbar toggler icon button is appearing but not showing the nav items on clicking the button.
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Admin Header</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./about">About</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./services">Services</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./contact">Contact</a>
</li>
<li class=" btn-primary nav-item text-white" role="button">
<a class="nav-link text-white" (click)="logOut()" >logout</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
This is the Navbar result:
On decreasing the width of the browser we have results something like this:
below is the code of index.html:
But on clicking on this button I am not able to see any nav items.
Works perfectly fine, you must be missing some script files.
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Admin Header</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./about">About</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./services">Services</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./contact">Contact</a>
</li>
<li class=" btn-primary nav-item text-white" role="button">
<a class="nav-link text-white" (click)="logOut()">logout</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
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>
I've tried other questions with similar topic with many different links to bootstrap but it was not working for me, none of them. Any clues why my dropdown button does not roll down when clicked (also does not when hovered either as this was the case for some people).
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.2/examples/dashboard/dashboard.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<link rel="stylesheet" type="text/css" href="{% static 'styles/stylesheet.css' %}">
<title>
Milk - {% block title_block %}Milk Students{% endblock %}
</title>
</head>
<body>
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark py-1">
<a class="navbar-brand p-2" href="{% url 'milk_app:home' %}">MilkStudents</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 ml-auto" >
<li class="nav-item"><a class="nav-link" href="{% url 'milk_app:home' %}">Home</a></li>
<li class="nav-item "><a class="nav-link" href="{% url 'milk_app:about' %}">About</a></li>
<!-- If the user is logged in, either as HOST or TENANT he gets these buttons available -->
{% if user.is_authenticated %}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
<li class="nav-item"><a class="nav-link" href="{% url 'milk_app:logout' %}">Log out</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'milk_app:profile' %}">View Profile</a></li>
<!-- Otherwise he can either log-in/register -->
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'milk_app:register' %}">Register</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'milk_app:login' %}">Login</a></li>
{% endif %}
</ul>
</div>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="container-fluid">
<div class="row">
<div role="main" class="col-md-9 ml-sm-auto col-lg-10 px-2">
{% block body_block %}{% endblock %}
<!-- FOOTER -->
<footer class="fixed-bottom">
<p> © MilkStudents.com · Careers · Contact Us · <a href="{% url 'milk_app:FAQ' %}" class="footer-href" >FAQ</a> {% if user.is_authenticated %}· LOGGED USER: {{user.username}} · ROLE: {{user.userprofile.account}}{%endif%} </p>
</footer>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://getbootstrap.com/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="https://getbootstrap.com/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
<script src="https://getbootstrap.com/docs/4.2/examples/dashboard/dashboard.js"></script>
<!-- Enables the popover buttons everywhere -->
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<!-- Enables the tooltips everywhere -->
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
The are linked at the bottom.
Instead of defining entire collapsible Nav,
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
it should look like this,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.2/examples/dashboard/dashboard.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<link rel="stylesheet" type="text/css" href="{% static 'styles/stylesheet.css' %}">
<title>
Milk -
</title>
</head>
<body>
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark py-1">
<a class="navbar-brand p-2" href="{% url 'milk_app:home' %}">MilkStudents</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 ml-auto" >
<li class="nav-item"><a class="nav-link" href="{% url 'milk_app:home' %}">Home</a></li>
<li class="nav-item "><a class="nav-link" href="{% url 'milk_app:about' %}">About</a></li>
<!-- If the user is logged in, either as HOST or TENANT he gets these buttons available -->
<!-- #
# ------- HERE -------------
#
-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<!-- ----END of dropdown --- -->
<li class="nav-item"><a class="nav-link" href="{% url 'milk_app:logout' %}">Log out</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'milk_app:profile' %}">View Profile</a></li>
<!-- Otherwise he can either log-in/register -->
<li class="nav-item"><a class="nav-link" href="{% url 'milk_app:register' %}">Register</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'milk_app:login' %}">Login</a></li>
</ul>
</div>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="container-fluid">
<div class="row">
<div role="main" class="col-md-9 ml-sm-auto col-lg-10 px-2">
{% block body_block %}{% endblock %}
<!-- FOOTER -->
<footer class="fixed-bottom">
<p> © MilkStudents.com · Careers · Contact Us · <a href="{% url 'milk_app:FAQ' %}" class="footer-href" >FAQ</a> {% if user.is_authenticated %}· LOGGED USER: {{user.username}} · ROLE: {{user.userprofile.account}}{%endif%} </p>
</footer>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://getbootstrap.com/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="https://getbootstrap.com/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
<script src="https://getbootstrap.com/docs/4.2/examples/dashboard/dashboard.js"></script>
<!-- Enables the popover buttons everywhere -->
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<!-- Enables the tooltips everywhere -->
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
This question already has an answer here:
menu toogle button not working in bootstrap 4
(1 answer)
Closed 4 years ago.
Currently when the screen is minimized, the toggle button appears, but I would like to be able to click it and see the contents of the navbar when the screen is regular size. Currently clicking it doesn't do anything. Is there a way to resolve this without JS?
This is my HTML page:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Great Songs</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{% url 'great_songs:great_songs' %}">Great Songs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:artists' %}">Artists <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:genres' %}">Genres</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:producers' %}">Producers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:labels' %}">Labels</a>
</li>
</ul>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
You don't need to write your own code to make it works, but you need to also include bootstraps js library and its dependencies (jQuery + popper.js), here you will find information how should you do it https://getbootstrap.com/docs/4.1/getting-started/download/
in case you have some issues with that let me know I will show you how to implement it to your code
#edit:
FYI bootstrap.css, provide for you only bunch of css classes which you can use for quick styling but it doesn't provides any interactivity unless those supported by css such as element hover or focus
code:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<title>Great Songs</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{% url 'great_songs:great_songs' %}">Great Songs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:artists' %}">Artists
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:genres' %}">Genres</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:producers' %}">Producers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:labels' %}">Labels</a>
</li>
</ul>
</div>
</nav>
<div class="container">
{% block content %} {% endblock %}
</div>
<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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>