I have a Django homepage that has a Bootstrap navbar, and when resized I have it show a toggle button. My issue is that when this toggle button comes into effect, I cannot dropdown the navbar items? I am unsure how I can fix this.
Snip of what these look like (for an idea):
https://imgur.com/a/PyiUs38
This is my imports:
Pastebin: https://pastebin.com/QqPiyVxf
<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- SCRIPTS -->
<script src="https://kit.fontawesome.com/879dc93f9e.js" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
</a>
<!--MAIN NAV-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
{% with request.resolver_match.url_name as url_name %}
<ul class="navbar-nav">
<li class="nav-item {% if url_name == 'home' %}active{% endif %}">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item {% if url_name == 'about' %}active{% endif %}">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
<a class="nav-link" href="{% url 'projects' %}">Projects</a>
</li>
<li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
<a class="nav-link" href="{% url 'uses' %}">Uses</a>
</li>
<li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% endwith %}
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>
These are my scripts at the bottom of the body:
<!-- SCRIPTS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<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>
Updated Working Snippet with Bootstrap 5.1 version
Bootstrap 5.1
I did following changes in your code
I used Bootstrap 5.1 version
I changed following attributes in button element
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
Changed to
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
Please check the following working snippet
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
</a>
<!--MAIN NAV-->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
{% with request.resolver_match.url_name as url_name %}
<ul class="navbar-nav">
<li class="nav-item {% if url_name == 'home' %}active{% endif %}">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item {% if url_name == 'about' %}active{% endif %}">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
<a class="nav-link" href="{% url 'projects' %}">Projects</a>
</li>
<li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
<a class="nav-link" href="{% url 'uses' %}">Uses</a>
</li>
<li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% endwith %}
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>
<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>
Updated Working Snippet with Bootstrap 3.4.1 version
Note: Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin. Thant's mean you have to call dropdown via javascript
Ex:
// Call the dropdowns via JavaScript___
$('.dropdown-toggle').dropdown();
Please check the following working snippet
$('.dropdown-toggle').dropdown();
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
</a>
<!--MAIN NAV-->
<button
type="button"
class="dropdown-toggle"
id="dropdownMenu1"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center dropdown-menu" id="navbar" aria-labelledby="dropdownMenu1">
{% with request.resolver_match.url_name as url_name %}
<ul class="navbar-nav">
<li class="nav-item {% if url_name == 'home' %}active{% endif %}">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item {% if url_name == 'about' %}active{% endif %}">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
<a class="nav-link" href="{% url 'projects' %}">Projects</a>
</li>
<li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
<a class="nav-link" href="{% url 'uses' %}">Uses</a>
</li>
<li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% endwith %}
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
Reference Link (My Another Stack Overflow Answer): https://stackoverflow.com/a/69763221/3073842
Does the html file link to the Bootstrap JavaScript dependency? It is required for navbars.
Include following JS libraries into your template file, right before the closing body tag,
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>
Related
I would like to create one indexview which content is completely visible with any browser (mobile and desktop) without the need of scrolling.
So I need any function which scale the content of the page (shrink html5 elements) so that all elements have their place on the screen.
At the moment I try to go with CSS.
I tried to set the max-height: 94vh (6vh are for my navbar) of my main container. But sadly that not works.
the included elements of the maincontainer are overlapping... So I have to scroll
Maybe this has something to the with the bootstrap cards?
The result looks like this: I have the undesirable scrollbar on the right (I would like to see all six cards without scroll, so the cards must be smaller...depending on the screensize):
Here my django templates:
Base template
<!-- Load nessessary static files-->
<!-- ===============================================================================================================================================-->
{% load static %}
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/base_style.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">
<link href="//cdn.jsdelivr.net/npm/round-slider#1.5.1/dist/roundslider.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/round-slider#1.5.1/dist/roundslider.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="{% static 'img/greencube2.png' %}" width="30" height="30" class="d-inline-block align-top" alt="">
Greencube
</a>
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'rooms_index' %}">Raumübersicht</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 3 %}">Schlafzimmer</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 1 %}">Wohnzimmer</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 2 %}">Badezimmer</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 5 %}">Küche</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 4 %}">Büro/Studio</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 6 %}">Garten</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="testid">
{% block page_content %}
{% endblock %}
</div>
</body>
{% block javascript %}{% endblock %}
</html>
CSS for my base template
body {
background: white url("img/leaf.png");
}
h1 {
color: white;
}
#testid{
background-color: blue;
max-height: 94vh;
}
IndexView
{% extends "base.html" %}
{% load static %}
{% block page_content %}
<div class="row">
{% for rooms in rooms %}
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="{% static rooms.image %}">
<div class="card-body">
<h5 class="card-title">{{ rooms.title }}</h5>
<p class="card-text">{{ rooms.description }}</p>
<label id="ActTmp{{ forloop.counter0 }}">{{ DBObjActhumidity.value }} °C</label>
<label id="Space{{ forloop.counter0 }}"> / </label>
<label id="ActHumy{{ forloop.counter0 }}">{{ DBObjActhumidity.value }} %</label>
<img id="windowimage{{ forloop.counter0 }}" src="{% static 'img/window_opened.png' %}" alt="Mein Bild" style="visibility: hidden; position: absolute;"><br>
<a href="{% url 'rooms_detail' rooms.pk %}"
class="btn btn-primary">
Raumsteuerung
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
Do you have any idea how I can reach my goal?
Thank you for your response!
I am using the navbar of this example project of Bootstrap 4.6. in my django project. Here is the code.
$(function() {
'use strict'
$('[data-toggle="offcanvas"]').on('click', function() {
$('.offcanvas-collapse').toggleClass('open')
})
})
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!--Navbar-->
<link rel="stylesheet" href="{% static 'css/quicky/navbar.css' %}">
<title>The</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Switch account</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<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>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="nav-scroller bg-white shadow-sm">
<nav class="nav nav-underline">
<a class="nav-link active" href="#">Dashboard</a>
<a class="nav-link" href="#">
Friends
<span class="badge badge-pill bg-light align-text-bottom">27</span>
</a>
<a class="nav-link" href="#">Explore</a>
<a class="nav-link" href="#">Suggestions</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
</div>
<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/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="{% static 'js/quicky/navbar.js' %}"></script>
</body>
</html>
The problem lies in the last <script> tag where i am trying to use navbar.js which is in the static folder. In the console I get the following errors:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at navbar.js:4
at navbar.js:7
However if I write the js content of navbar.js file directly in the html file, I get no errors.
Why does this happen?
I have a bootstrap navbar which expands at md breakpoint and is made of 2 submenus the collapsing of which is controlled by two buttons with navbar-toggler class.
I want to have my navbar to expand at md but one of my submenu (account) stay always toggled (button that trigger the content show under the navbar).
I'm not experimented with js but I guess it's possible to do it via a script. I've also seen in the source code that when the navbar expand the navbar-toggler get display:none which is a problem.
Here is my navbar and a js script to control the 2 submenus collapse:
$('#links').on('show.bs.collapse', function() {
$('#account').collapse("hide");
})
$('#account').on('show.bs.collapse', function() {
$('#links').collapse("hide");
})
<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" 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>
<nav class="navbar fixed-top navbar-expand-md navbar-light">
<a class="navbar-brand" href="#">MYSITE</a>
<!-- links toggle -->
<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- account toggle -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-user"></i>
</button>
<div class="collapse navbar-collapse" id="links">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home Page</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Prices</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Who are we</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="account">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">Sign up</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Sign in</a>
</li>
</ul>
</div>
</nav>
This part of your javascript $('#account').collapse() doesn't get executed because the account div is not yet loaded. Wait for it to load then execute the line, like this:
window.onload = function(){
$('#account').collapse();
}
it should do the trick.
$('#links').on('show.bs.collapse', function() {
$('#account').collapse("hide");
})
$('#account').on('show.bs.collapse', function() {
$('#links').collapse("hide");
})
$('#account').collapse()
<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" 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>
<nav class="navbar fixed-top navbar-expand-md navbar-light">
<a class="navbar-brand" href="#">MYSITE</a>
<!-- links toggle -->
<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- account toggle -->
<button class="navbar-expand-md" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-user"></i>
</button>
<div class="collapse navbar-collapse" id="links">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home Page</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Prices</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Who are we</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<div class="collapse navbar-toggleable-sm" id="account">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">Sign up</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Sign in</a>
</li>
</ul>
</div>
</nav>
I am developing simple blogging site, the problem I am facing is my navbar is not responsive, below is my navbar seen in desktop.
but as I decrease the size of browser, nav bar gets hidden
what I need is hamburger icon on left top when I decrease the size of the screen on clicking that all navbar menu items should be visible vertically.
below is my code:
{% load static %}
<!doctype html>
<html lang="en">
<head>
{% if title %}
<title>{{ title }}</title>
{% else %}
<title>Young Minds</title>
{% endif %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{% static 'blog/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/animate.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/fonts/ionicons/css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/fonts/fontawesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/fonts/flaticon/font/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/style.css' %}">
<link href="https://fonts.googleapis.com/css?family=Hind&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merienda&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Theme Style -->
<!-- jquery functions -->
</head>
<body>
<header role="banner">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav" style="font-family: 'Hind', sans-serif;margin-left:198px;">
{% with url_name=request.resolver_match.url_name %}
<li class="nav-item" style="margin-right:15px;margin-left:-20px;">
<a class="nav-link active" href="{% url 'blog-home' %}" style="margin-top:-3px;">
<span style="font-size: 18px;">Blog </span></a>
</li>
<li class="nav-item" style="margin-right:15px;margin-left:88px;">
<a class="nav-link" href="{% url 'blog-home' %}">Home</a>
</li>
<li class="nav-item dropdown" style="margin-right:15px;">
<a class="nav-link dropdown-toggle" href="category.html" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Catogery</a>
<div class="dropdown-menu" aria-labelledby="dropdown04">
{% for category in categories %}
<a class="dropdown-item" href="{% url 'category-posts' category.category__category %}">{{category.category__category}}</a>
{% endfor %}
</div>
</li>
<li class="nav-item dropdown {% if url_name == 'index' %}active{% endif %}" style="margin-right:15px;">
<a class="nav-link" href="{% url 'about' %}">About Us</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item" style="margin-right:15px;">
<a class="nav-link" href="{% url 'profile' user%}">Profile</a>
</li>
<li class="nav-item" style="margin-right:15px;">
<a class="nav-link" href="{% url 'post-create' %}">Create Blog</a>
</li>
<li class="nav-item" style="margin-right:15px;">
<a class="nav-link" href="{% url 'user-posts' user %}">My Blogs</a>
</li>
<li class="nav-item" style="float: left;">
<a class="nav-link" href="{% url 'logout' %}" >Logout({{ user.username }})</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'registration' %}">Signup</a>
</li>
{% endif %}
{% endwith %}
</ul>
</div>
</div>
</header>
{% block content%}
{% endblock content%}
<footer class="site-footer">
<div class="container">
<div class="row mb-5">
<div class="col-md-4">
<h3>Developer's Message</h3>
<p class="mb-4">
</p>
<p>Wish you all a very good day ! Enjoy Blogging ! <i class="fa fa-smile-o" aria-hidden="true"></i></p>
</div>
<div class="col-md-6 ml-auto">
<div class="row">
<div class="col-md-7">
<h3>Quick Links</h3>
<ul class="list-unstyled">
<li >
Home
</li>
<li>About</li>
<li class="About">Categories</li>
</ul>
</div>
<div class="mb-6">
<h3>Social</h3>
<ul class="list-unstyled footer-social">
<li><span class="fa fa-twitter"></span> Twitter</li>
<li><span class="fa fa-facebook"></span> Facebook</li>
<li><span class="fa fa-instagram"></span> Instagram</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p class="small">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright © <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>document.write(new Date().getFullYear());</script>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</footer>
<!-- END footer -->
<!-- loader -->
<script src="{% static 'blog/js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'blog/js/jquery-migrate-3.0.0.js' %}"></script>
<script src="{% static 'blog/js/popper.min.js' %}"></script>
<script src="{% static 'blog/js/bootstrap.min.js' %}"></script>
<script src="{% static 'blog/js/owl.carousel.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'blog/js/main.js' %}"></script>
<script type="text/javascript">
$('.reply-btn').click(function(){
console.log($(this).parent());
console.log($(this).parent().parent());
console.log($(this).parent().parent().next());
$(this).parent().parent().next('.comment-body').fadeToggle()
console.log("trigerred")
});
$(document).ready(function() {
$('.About').click(function(event) {
$("#About-content").toggle("slow");
});
});
$(document).ready(function(event){
$(document).on('click',"#like_the_post_by_user", function(event){
event.preventDefault();
console.log($("#like_the_post_by_user").val())
console.log("from jquery section")
var pk = $(this).attr('value');
$.ajax({
type : "POST",
url : "{% url 'like_post' %}",
data : {'id': pk , "csrfmiddlewaretoken": '{{ csrf_token }}' },
dataType : 'json',
success : function(response){
$('#like-section_user').html(response['form'])
console.log($('#like-section_user').html(response['form']));
},
error : function(rs, e){
console.log(rs.responseText);
}
});
});
});
</script>
</body>
</html>
I tried searching everywhere and tested on my own but I couldn't do it myself.
Any help will be greatly appreciated!
Thanks in advance!
You need to add a toggle button to have a hamburger menu
in your case would be something like
<header role="banner">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
...
</div>
</div>
</header>
...
I am trying to use jQuery with my django app but when I use the inspector and look at the .js file in Sources, I am seeing this error. I know this question has come up before, but I haven't been able to figure out how to fix it in my case. This is the HTML for the page I am trying to load:
{% extends 'great_songs_app/base.html' %}
{% load static %}
{% block content %}
<script src="{% static 'great_songs_app/playlist_jquery.js' %}">
</script>
--code--
{% endblock %
And this is my base HTML file:
{% load static %}
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://rsms.me/inter/inter-ui.css" rel="preload" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'great_songs_app/style.css' %}">
<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:great_songs' %}">Songs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:artists' %}">Artists</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>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:playlists' %}">Playlists</a>
</li>
</ul>
<ul class="navbar-nav" id="login-list">
{% if user.is_authenticated %}
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:logout' %}" id=login>log out</a>
</li>
{% else %}
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:login' %}" id=login>log in</a>
</li>
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>
This is my jQuery file:
jQuery(document).ready(function($) {
$(".playlist-row").click(function() {
window.location = $(this).data("href");
});
});
I had a similar problem and just I pasted the js files inside head tag.
Here is my base.html
Then inside body tag, the {% block content %}{% endblock %}.