bootstrap navbar hamburger menu does not work in django app - html

I have developed a django app but for some reason the bootstrap navbar won't show menu items on mobile phone
Whenever I run my app on a mobile device's web browser the hamburger menu does not extend to show my nav items...it is very odd.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><img src="{% static 'images/logo.png' %}"></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">
{% if user.is_authenticated %}
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'dashboard:transactions' %}">Transactions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'dashboard:quote' %}">Quote Tool</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'dashboard:tracking' %}">My Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'dashboard:home' %}">Home</a>
</li>
<a class="nav-link" href="{% url 'dashboard:support' %}">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Logout</a>
</li>
</li>
</ul>
{% else %}
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'register' %}">Sign up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'dashboard:home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'dashboard:quote' %}">Quote Tool</a>
</li>
</ul>
</div>
{% endif %}
</div>
</nav>

Your code works fine in my Django/Bootstrap-project. You should double check that you have imported the Bootstrap JS correctly, as this is probably the reason why the hamburger won't expand. Try using the starter template https://getbootstrap.com/docs/4.3/getting-started/introduction/ and see if it does the trick :)

As suggested by Patrick, I reloaded afresh js from the boot strap starter template hamburger menu started working on mobile.
Patrick: Ans> "You should double check that you have imported the Bootstrap JS correctly, as this is probably the reason why the hamburger won't expand. Try using the starter template https://getbootstrap.com/docs/4.3/getting-started/introduction/ and see if it does the trick :)"

Related

I've made a bootstrap 5 navbar but it's not expanding when I make it a small screen, works for middle size (iPad screen dim), is this a common issue?

So the code below is for Django hence the blocks for the links, they work fine it's just when the screensize is too small the drop down nav doesnt drop down and if i leave it dropped down and make the screen smaller then I can't make it un drop down. Very annoying because I've got the website looking actually nice for once but it does this.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" id="logo" href="/">Company</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Expand Navigation">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
<li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
<li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
<li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
<li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
</div>
</div>
</nav>
Try replacing navbar-expand-lg to navbar-expand class on <nav> tag.
"lg" is for larger devices based on responsiveness.
You can check doc here: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
So your code should be:
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" id="logo" href="/">Company</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Expand Navigation">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
<li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
<li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
<li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
<li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
</div>
</div>
</nav>
Add aria-expanded="false" on button
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" id="logo" href="/">Company</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-expanded="false aria-label="Expand Navigation">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
<li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
<li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
<li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
<li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
</div>
</div>
</nav>

Navbar sliding to the right

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navspacing"></span>
<a class="navitems hover" href="{% url 'home' %}">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span style="margin:5px;" class="navbar-toggler-icon"></span>
</button>
<div class=" collapse navbar-collapse topnav" id="collapsibleNavbar">
<ul class="navbar-nav" >
{% if user.is_authenticated %}
<li class="nav-item navitems">
<a class="nav-link hovering" href="{% url 'light_novel:characters_page' %}">Characters</a>
</li>
<li class="nav-item navitems">
<a class="nav-link " href="{% url 'light_novel:moves_page' %}">Moves</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:chapters_page' %}">Chapters</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:outfits_page' %}">Outfits</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:sights_page' %}">Sight</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:timelines_page' %}">Timeline</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:scratchpads_page' %}">Scratchpad</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:statistics' %}">Statistics</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'logout' %}">Logout</a>
</li>
{% else %}
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Bootstrap4 togger not showing links when page resizes

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>

Bootstrap 4 Navbar Toggle Icon Doesn't Work

I have a HTML file below. When I make the browser smaller, I can see the hamburger menu, but when I click on it, nothing happens.
<nav class="navbar navbar-expand-lg navbar-light">
Homepage
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<!-- left side -->
</ul>
<ul class="navbar-nav">
<!-- right side -->
{% if user.is_authenticated %}
<li class="nav-item ml-3 mr-3">
<a class="nav-link" href="#">{{user.username}}</a>
</li>
<li>
<a class="nav-link" href="{% url 'logout'%}">Log out</a>
</li>
{% else %}
<li class="nav-item ml-3 mr-3">
<a class="nav-link" href="{% url 'login'%}">Log In</a>
</li>
<li>
<a class="nav-link" href="{% url 'signup' %}">Sign Up</a>
</li>
{% endif %}
</ul>
</div>
</nav>
How stupid my mistake was!
I forgot to load bootstrap js files!
Add this:
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
to the bottom of your <body>. Further reading about bootstrap CDN

bootstrap dropdown-menu no css format

I'm trying to implement a bootstrap dropdown menu, despite the right class being applied to the sublist, I'm losing my formatting and the padding that normally applies to bootstrap.
I'm using bootstrap 4.0.0-alpha.2 as follows:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-xs navbar-collapse" id="exCollapsingNavbar2">
<a class="navbar-brand" href="{% url 'home' %}"><img width="140" src="{% static 'images/openopps_logo.png' %}"</a>
<ul class="nav navbar-nav">
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'pricing' %}">Pricing</a></li>
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'home' %}">Blog</a></li>
<li class="nav-item oo-roboto-override dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="{% url 'about' %}">
About
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Vision</li>
<li>Our company</li>
<li>FAQs</li>
<li>Contact us</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
{% if user.is_authenticated %}
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'auth_logout' %}"><button class="btn btn-sm btn-oo-outline">Logout</button></a></li>
{% else %}
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'registration_register' %}"><button class="btn btn-sm btn-oo">Sign Up</button></a></li>
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'auth_login' %}"><button class="btn btn-sm btn-oo-outline">Login</button></a></li>
{% endif %}
</ul>
</div>
</nav>
Bootstrap 4 has an extra class required for dropdown menus. Using the following class in the <li> tags works.
<li class="dropdown-item">Vision</li>