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>
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'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'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.
I am using Bootstrap 3.3.2 with Django 1.8.8 to build my website. I am using mod-wsgi version 4.4.23 and Apache 2.2.15 to deploy this on a CentOS VM.
I have a navbar fixed to the top, with a collapsible Signup menu. When I connect to the website over http and click on the menu, the dropdown menu items are listed. But when I connect over https and do the same, the dropdown menu items are not displayed. The same thing happens when I click on minimized navbar menu items when the viewport shrinks.
What could be going wrong?
The base template code is here:
<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'bootstrap-3.3.2-dist/css/bootstrap_cerulean.min.css' %}" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="{% static 'bootstrap-3.3.2-dist/css/custom_cerulean.css' %}" rel="stylesheet" />
<!-- Load Javascript files -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="{% static 'bootstrap-3.3.2-dist/js/bootstrap.min.js' %}"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class = "navbar-brand" href="/">
<img style="width:auto; height:160%;" src="{% static "logo.jpg" %}">
</a>
{% if user.is_authenticated %}
<a class = "navbar-brand" href="{% url 'myapp:profile' %}">
<span class="glyphicon glyphicon-home"></span>
</a>
{% endif %}
</div><!--/.navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
{% if not user.is_authenticated %}
<li class="dropdown">
Sign Up
<ul class="dropdown-menu" role="menu">
<li>New Employer</li>
<li>New Employee</li>
</ul>
</li>
{% endif %}
<li>
{% if not user.is_authenticated %}
Login
{% else %}
Logout
{% endif %}
</li>
{% if user.is_authenticated %}
<li>
Change Password
</li>
<li>
MyApp
</li>
{% endif %}
</ul><!--/.navbar-left -->
<ul class="nav navbar-nav navbar-right">
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul><!--/.navbar-right -->
</div><!--/.navbar-collapse -->
</div><!--/.container -->
</nav>
This call to load jQuery http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" is to a http address. It's possible your browser won't load it when you go to HTTPS. That'll break all kinds of things.
Additionally you have some fonts at http:// addresses. Easiest way to fix is to prefix with // .
Right click and Inspect, in most browsers you'll see the error in the Dev Tools.