I'm trying to set up a Navbar for my light control/camera monitoring system. However, for my camera dropdown whenever I go to select a specific camera, it doesn't show anything.
This is running on a Win 10 machine with the latest Django and bootstrap for development. I've tried added jQuery and updating my bootstrap files.
{% load staticfiles %}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Light Control</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" media="screen" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style.css' %}" media="screen" type="text/css" />
<link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}" media="screen" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand">Light Control</a>
{% if isLogged %}
<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">
<li class="nav-item">
<a class="nav-link" href="/control">Light Control<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Cameras
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/camera/office">Office</a>
<a class="dropdown-item" href="/camera/office">ec</a>
</div>
</li>
</ul>
</div>
<div>
Log Out
</div>
{% endif %}
</nav>
</body>
</html>
I tried to click on the button, but nothing actually shows up once I click on it.
Related
I was writing an html page with bootstrap and then I come across some sort of kind of error the navbrand is too long. It takes up a whole lot of space in my navbar at the point when I view it on mobile It takes up a whole line and the hamburger icon goes to the bottom. This problem doesn't occur with text only with images.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Urci</title>
<!-- BOOTSTRAP -->
<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.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- CSS -->
<!-- CSS -->
<link rel='stylesheet' href="{% static 'home/css/custom.css' %}">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Oswald:wght#300&family=Roboto+Condensed&display=swap" rel="stylesheet">
<!-- W3 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light custom-navbar">
<div class="container-fluid">
<a class="navbar-brand urci-brand" href="{% url 'home' %}"><img class="branding "src="{% static 'home/images/Urci-Logo.png' %}" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="navbarNavAltMarkup">
<div class="navbar-nav custom-navbar">
<a class="nav-link" href="{% url 'bod' %} ">Board of Directors</a>
<a class="nav-link" href="#">Events</a>
{% if user.is_authenticated %}
<div class="navbar-nav ml-auto">
<a class="nav-link" href="{% url 'announcement:create' %}">Create Announcement</a>
<a class="nav-link" href="#">Create Events</a>
{% endif %}
</div>
</div>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
enter image description here
In your home/css/custom.css add the following...
.urci-brand{
width: fit-content !important;
}
This would mean that the width of the anchor tag would be the width of the content within it.
And the !important is used to overwrite some bootstrap styling.
I am trying to create a website using django and bootstrap. I am extending base.html into index.html. I have implemented navbar(from bootstrap) in base.html and want to implement owl carousel in index.html. Both base.html and index.html are in templates folder of my project. I tried placing css and js files like owl.carousel etc in
<!-- THIS IS base.html-->
<!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.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/owl.carousel.css">
<link rel="stylesheet" href="/static/css/owl.theme.green.min.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/owl.carousel.min.js"></script>
<title>BURGERZONE-{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<h1>BURGERZONE</h1>
</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">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/menu">Menu<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Today's special
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}
{% endblock body %}
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<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.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
})
</script>
</body>
</html>
templates folder,static folder, created separate folder but nothing worked. Tried removing and adding forward slash/ in path every possible way that i know of
<!-- THIS IS index.html-->
{% extends 'base.html' %}
{% block title %}
Home
{% endblock title %}
{% block body %}
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
{% endblock body %}
I AM GETTING FOLLOWING ERROR SEEN IN CONSOLE AFTER PRESSING F12
[1]: https://i.stack.imgur.com/KgD7n.png
jquery-3.5.1.slim.min.js:2 jQuery.Deferred exception: $(...).owlCarousel is not a function TypeError: $(...).owlCarousel is not a function
at HTMLDocument.<anonymous> (http://127.0.0.1:8000/:126:26)
at e (https://code.jquery.com/jquery-3.5.1.slim.min.js:2:30211)
at t (https://code.jquery.com/jquery-3.5.1.slim.min.js:2:30513) undefined
E.Deferred.exceptionHook # jquery-3.5.1.slim.min.js:2
jquery-3.5.1.slim.min.js:2 Uncaught TypeError: $(...).owlCarousel is not a function
at HTMLDocument.<anonymous> ((index):126)
at e (jquery-3.5.1.slim.min.js:2)
at t (jquery-3.5.1.slim.min.js:2)
:8000/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Add owl.carousel.min.js file in your home page and before the file in which you are using add the following code:
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
--
$("#owl-demo").owlCarousel({
navigation : true
});
Try this way,the recommended way in Django for loading static files by using this way
{% load static %}
<!-- THIS IS base.html-->
<!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.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/owl.carousel.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.green.min.css' %}">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<title>BURGERZONE-{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<h1>BURGERZONE</h1>
</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">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/menu">Menu<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Today's special
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}
{% endblock body %}
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<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.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
})
</script>
</body>
</html>
all other code write same I'm not compile the code just tell you if you feel any problem feel free to ask
As I am locally adding Javascript files
i don't need add them again just before body tag ends. So i removed javascript files added at the end of body tag and it worked perfectly.
<!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.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/owl.carousel.css">
<link rel="stylesheet" href="/static/css/owl.theme.green.min.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/owl.carousel.min.js"></script>
<title>BURGERZONE-{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<h1>BURGERZONE</h1>
</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">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/menu">Menu<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Today's special
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block body %}
{% endblock body %}
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
})
</script>
</body>
</html>
https://i.stack.imgur.com/KgD7n.png
This error comes when you not initialize the owl carousel.
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
items: 4, // no. of items
nav: true, // if you want navigation arrows make it true otherwise false
dots: true // if you want pagination dots make it true otherwise false
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
i have a bootstrap navbar with a sticky-top class it's works for about 200px scroll but when i pass that 200px limit it does not work , the thing is when a use the navbar with the bootstrap starter template ( no local server just html ) it works but when use it whit django and i run my sever it does not work
base.html
<!DOCTYPE html>
<html>
{% include 'head.html' %}
<body>
{% include 'header.html' %}
{% block content %}
{% endblock content %}
{% include 'footer.html' %}
{% include 'scripts.html' %}
</body>
</html>
head.html:
{% load static %}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="{% static 'vendor/bootstrap-4.5.0/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'swiper-5.3.7/package/css/swiper.min.css' %}">
<script src="https://kit.fontawesome.com/f057e2fa03.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{% static 'vendor/jquery-ui-1.12.1/jquery-ui.min.css' %}">
<!-- Google fonts - Open Sans-->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- theme stylesheet-->
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<!-- semantic UI -->
<link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
<!--Chart js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<!--braintree-->
<script src="https://js.braintreegateway.com/web/dropin/1.22.1/js/dropin.min.js"></script>
</head>
header.html
{% url 'home' as home_url %}
{% url 'products_list' as products_url %}
<!-- navbar phone -->
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top d-block d-md-none">
<div class="container px-0">
<a class="navbar-brand" href="#">YouShirt</a>
<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">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
</div>
</div>
</nav>
I'm following a tutorial to make websites with Django. I'm currently trying to add a navigation bar using bootstrap CDN but the following appears. The code I am using is posted below.
There is no navigation bar present:
Below is the code is used.
<!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.5.0/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81i\
uXoPkFOJwJ8ERdknLPMO"
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>
<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">
<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+9J3UJ46jBk0WLaUAdn689aCwoqbB\
JiSnjAK/
l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\
js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\
6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
The site is supposed to display a navigation bar with the users name at the top right.
to use CDN you need active internet connection, here looks like either you are developing offline or your django project does not have access to internet.
if developing offline is your requirement, then you may download those CDN files, then use them.
I have been trying to get the navbar collapse to toggle on and off, but it is not working. I have made sure I include jQuery before bootstrap.min.js. I do not know where else to look.
index.html
{% extends "home/base.html" %}
{% load staticfiles %}
{% block header %}
{% endblock %}
{% block content %}
<div class="wrapper">
<!--=== Header v6 ===-->
<div class="header-v6 header-white-transparent header-sticky">
<!-- Navbar -->
<div class="navbar mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type='button' class='navbar-toggle' data-toggle='dropdown' data-target='#myNavbar'>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Navbar Brand -->
<div class="navbar-brand">
<a href="">
<img class="default-logo" src="assets/img/logo3-light.png" alt="Logo">
<img class="shrink-logo" src="assets/img/logo3-dark.png" alt="Logo">
</a>
</div>
<!-- ENd Navbar Brand -->
<!-- Header Inner Right -->
<div class="header-inner-right">
<ul class="menu-icons-list">
<li class="menu-icons">
<i class="menu-icons-style search search-close search-btn fa fa-search"></i>
<div class="search-open">
<input type="text" class="animated fadeIn form-control" placeholder="Start searching ...">
</div>
</li>
</ul>
</div>
<!-- End Header Inner Right -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNavbar">
<div class="menu-container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="dropdown active">
Home
</li>
<!-- End Home -->
<!-- Home -->
<li>
About Us
</li>
<!-- End Home -->
<!-- Home -->
<li>
Rockets
</li>
<!-- End Home -->
<!-- Home -->
<li>
Ballistics
</li>
<!-- End Home -->
<!-- Home -->
<li>
Space
</li>
<!-- End Home -->
</ul>
</div>
</div><!--/navbar-collapse-->
</div>
</div>
<!-- End Navbar -->
</div>
<!--=== End Header v6 ===-->
<!-- Interactive Slider v2 -->
<div class="interactive-slider-v2 img-v4">
<div class="container">
<h1>Test Splash</h1>
<p>Fully responsive test template.</p>
</div>
</div>
<!-- End Interactive Slider v2 -->
<!--=== Content ===-->
<div class="content-md">
<div class="container">
<!-- Service Box -->
<div class="row text-center margin-bottom-60">
<div class="col-md-4 md-margin-bottom-50">
<img class="image-md margin-bottom-20" src="assets/img/icons/flat/01.png" alt="">
<h1 class="title-v3-md margin-bottom-10">Fully Responsive</h1>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cur modo, tortor mauris con</p>
</div>
<div class="col-md-4 flat-service md-margin-bottom-50">
<img class="image-md margin-bottom-20" src="assets/img/icons/flat/02.png" alt="">
<h2 class="title-v3-md margin-bottom-10">HTML5 + CSS3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cur modo, tortor mauris con</p>
</div>
<div class="col-md-4 flat-service">
<img class="image-md margin-bottom-20" src="assets/img/icons/flat/03.png" alt="">
<h2 class="title-v3-md margin-bottom-10">Launch Ready</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cur modo, tortor mauris con</p>
</div>
</div>
<!-- End Service Box -->
</div><!--/container -->
<!-- Link List -->
<div class="col-md-3 md-margin-bottom-40">
<div class="headline"><h2>Useful Links</h2></div>
<ul class="list-unstyled link-list">
<li>About us<i class="fa fa-angle-right"></i></li>
<li>Portfolio<i class="fa fa-angle-right"></i></li>
<li>Latest jobs<i class="fa fa-angle-right"></i></li>
<li>Community<i class="fa fa-angle-right"></i></li>
<li>Contact us<i class="fa fa-angle-right"></i></li>
</ul>
</div><!--/col-md-3-->
<!-- End Link List -->
<!-- Address -->
<div class="col-md-3 map-img md-margin-bottom-40">
<div class="headline"><h2>Contact Us</h2></div>
<address class="md-margin-bottom-40">
25, Lorem Lis Street, Orange <br />
California, US <br />
Phone: 800 123 3456 <br />
Fax: 800 123 3456 <br />
Email: info#anybiz.com
</address>
</div><!--/col-md-3-->
<!-- End Address -->
</div>
</div>
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>
2015 © All Rights Reserved.
Privacy Policy | Terms of Service
</p>
</div>
<!-- Social Links -->
<div class="col-md-6">
<ul class="footer-socials list-inline">
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Skype">
<i class="fa fa-skype"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Google Plus">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Pinterest">
<i class="fa fa-pinterest"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Dribbble">
<i class="fa fa-dribbble"></i>
</a>
</li>
</ul>
</div>
<!-- End Social Links -->
</div>
</div>
</div><!--/copyright-->
{% endblock %}
{% block js_dependencies %}
{% endblock %}
base.html
{% load staticfiles %}
<html>
<head>
<link href="{% static 'bootstrap/css/bootstrap.css' %}"
rel="stylesheet" media="screen">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel='stylesheet' type='text/css' href='http//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin'>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/style.css' %}">
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/header.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/footer.css' %}">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/animate.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/line-icons.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/fonts/font-awesome/cssfont-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/cubeportfolio.min.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/custom-cubeportfolio.css' %}">
<!-- CSS Pages Style -->
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/page-one.css' %}">
<!-- CSS Theme -->
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/default.css' %}" id="style_color">
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/dark.css' %}">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/animate.css' %}">
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/line-icons.css' %}">
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/fonts/font-awesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/parallax.css' %}">
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/jquery.fancybox.css' %}">
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/owl.carousel.css' %}">
<!-- CSS Customization -->
<link rel="stylesheet" type='text/css' href="{% static 'bootstrap/css/_Home/custom.css' %}">
<!-- Web Fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!-- CSS Customization -->
<link rel="stylesheet" href="{% static 'bootstrap/css/_Home/custom.css' %}">
{% block header %} {% endblock %}
</head>
<body>
{% block content %} {% endblock %}
{% block js_dependencies %}
<!-- JS Global Compulsory -->
<script type="text/javascript" src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/jquery-migrate.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/back-to-top.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/smoothScroll.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/jquery.parallax.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/waypoints.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/jquery.counterup.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/jquery.cubeportfolio.min.js' %}"></script>
<!-- JS Customization -->
<script type="text/javascript" src="{% static 'bootstrap/js/_Home/custom.js' %}"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/app.css' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/Responsive_Features/cube-portfolio-3.js' %}"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
App.initCounter();
App.initParallaxBg();
});
</script>
{% endblock %}
</body>
</html>
you have some mistake in your code . see this example for Collapsing The Navigation Bar
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"> </ul>
</div>
</div>
</nav>
Is the Bootstrap Navbar being displayed properly but its not getting clicked(hamburger menu), is that what you meant?