I am learning DJANGO and while proceeding wanted to give nice look to some pages. I am currently new in programming (only 4 months coding) and mostly spent time with Python, could find time to properly learn front-end.
So my problem is I can`t center LOGIN block in the page. I am using Bootstrap4.5 and gave some Shadow to make object like floating. I now there were similar questions here with answers and tons of tutorial of centering elements either with custom CSS or Bootstrap Flex or Justify and I really tried almost everything I found with no result. Every time time position of Block is getting somewhere else but not center.
My Base HTML:
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<title>Newspaper Project</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">
Log In
Sign up
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<!-- JAVASCRIPT 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/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
My Login HTML:
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
{% if user.is_authenticated %}
<h2>You are already logged in!</h2>
Log Out
{% else %}
<form class="shadow-lg p-3 mb-5 bg-white rounded login" method="post">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-success" type="submit">Log In</button>
</form>
{% endif %}
{% endblock %}
And attached image how the page is looking.
I really dont know what else I can try to center the login block. All I want is to center it below navbar in remaining space.
Thanks in advance!
You can use text-align attribute for this as following.
<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>
This will center all the content inside the parent DIV. An optional way is to use margin: auto CSS attribute with predefined widths and heights. Please follow the following thread for more information.
Try this, by setting the position to absolute you're positioning your form relative to the outer container, so you can tweak the percentage left and top as you wish.
.div {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
<body>
<div class="div">
<h3> Hi, I'm just an example form 😊</h3>
<input><br>
<input><br>
<button>click me</button>
</div>
</body>
Related
Building my first Django app from a tutorial, following the instructions pretty much verbatim but my navbar dropdown menu is not working no matter what I try, so unable to log out or change password from the navbar.
I am very new to js, but some things I have tried:
Experimenting w different browsers (doesn't work for Safari or Chrome)
Have looked at similar questions and implemented those techniques but it's still not working (linking to js in the head, making sure to link to js/popper/bootstrap in the correct order, etc.):
django bootstrap dropdown not working
Have also attempted to create static folders in pages/static/js and pages/static/css but that looks like it may be for more advanced styling than what we're going for here.
Bootstrap template not working correctly Django
Template file/directory below. Issue is between lines 55 and 68 (div class="collapse navbar-collapse")
Thanks in advance for the help.
<!-- templates/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">
<!-- 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+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/\ 1.14.3/
umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAKl8WvCWPIPm49"
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>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> -->
<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>
{% if user.is_authenticated %}
<ul class="navbar-nav mr-auto">
<li class="nav-item">+ New</li>
</ul>
{% endif %}
<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>
</body>
</html>
I copied your code and had the same problem but after swapping the bootstrap.js script for a different one it started working.
The problem was a backslash in the bootstraps js URL.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\ js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\ 6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
After https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/ there is \ js/bootstrap.min.js
but it should be https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js
So when we switched to the newest js it fixed the problem but that js is still valid if you fix the path.
https://getbootstrap.com/docs/4.4/getting-started/introduction/
My collapsible navbar is not working on this basic site, and I am not sure why. I have tried to reorder the CDN scripts, copied and pasted directly from Boostrap's docs, and have double checked the code a few times. I'm sure it's a stupid mistake, but can anyone help me and point out what is happening here? The toggle button appears, but doesn't do anything when clicked. This is being used with a Django project.
<!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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>{% block title %}The title I'm using{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Home</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 %}
<form class="form-inline ml-auto">
<a href="{% url 'logout' %}" class="btn btn-outline-secondary">
Log out</a>
<a href="{% url 'password_change' %}" class="btn btn-primary ml-2">
Change password</a>
Update user profile
{{ user.username }}
</form>
{% 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>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
Incorrect attribute value in the toggle button:
data-target="navbarCollapse"
It should look like this (include the pound symbol):
data-target="#navbarCollapse"
I have thoroughly researched this issue already, but all of the solutions are from an older version of Bootstrap, and they didn't help.
My problem is that when I press the button, the modal appears behind the background. All the solutions I've found say that the parent container/modal can't have fixed or relative position. However, my modal doesn't have a parent container and I don't have any custom CSS written for the modal.
I think the problem could be with the fact that I am using Django with this HTML file. Here is the code -
example.html
{% extends 'main/base.html' %}
{% load static %}
{% block title %}Example Title{% endblock %}
{% block fullscreen_content %}
<div id="map-canvas" style="height: calc(100% - 50px); width: 100%;"></div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endblock %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
base.html
{% load static %}
<!doctype html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.2/flatly/bootstrap.min.css"> -->
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="{% static 'style.css' %}" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
{% block header %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'shelter:index' %}">Example</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">
{% with 'example example example' as tabs %}
{% for tab in tabs.split %}
<li class="nav-item {% if page == tab %}active{% endif %}">
{{ tab|title }}
</li>
{% endfor %}
{% endwith %}
</ul>
{% if request.user.is_authenticated %}
<ul class="navbar-nav">
<li class="nav-item">
Log out
</li>
</ul>
{% endif %}
</div>
</nav>
{% block fullscreen_content %}{% endblock %}
<div class="container">
<div class="page">{% block content %}{% endblock %}</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
{% block footer %}{% endblock %}
</body>
</html>
I removed/edited sensitive parts in the code or parts that aren't necessary, so there should hopefully be enough to go on. Thanks!
EDIT - Here is a screenshot
In your main CSS file, try setting the z-index of the backdrop to 1, the CSS below might help:
.modal-backdrop{
z-index: 1;
}
If you are comfortable themeing bootstrap in SASS, the following variables will do the trick:
$zindex-modal: 100001;
$zindex-modal-backdrop: 100000;
I did this so that my modal/backdrop would appear above my sticky navbar.
I would like to create the links of the menu dynamically based on the Category models. I've used DetailView and ListView for create a list and detail page of a single category and it run fine.
Now I would like to see in base.html a new link in a "dropdown" menu every time the user add a new Category.
This is base.html
{% load static %}
<!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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>{% block head_title %}Test{% endblock head_title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'list_tag' %}">Tag</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">
Category
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% for category in category_list %}
{{ category.category_name }}
{% endfor %}
</div>
</li>
</div>
</nav>
<div class="container">
<!-- INIZIO corpo centrale -->
{% block content %}
{% endblock content %}
<!-- FINE corpo centrale -->
</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+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
This is list_category.html
{% extends 'base.html' %}
{% load static %}
{% block head_title %}Elenco Categorie | {{ block.super }}{% endblock head_title %}
{% block content %}
{% for category in category_list %}
<h1>{{ category.category_name }}</h1>
<hr>
{% endfor %}
{% endblock content %}
This is views.py
class CategoryList(ListView):
model = Category
context_object_name = 'category_list'
template_name = "list_category.html"
class SingleCategory(DetailView):
model = Category
template_name = "single_category.html"
When I use the code in base.html it was shown an empty menu.
How I can resolve?
UPDATE:
Using the solution of #ans2human in this post, I've created a file context_processors.py like below:
from .models import Category
def blog_menu(request):
link_menu = Category.objects.all()
return {
'link_menu': link_menu
}
Then I've added the string in settings.py:
'blog.context_processors.blog_menu',
The new strings of dropdown menu are these:
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-newspaper" id="img"></i> Blog
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"></i> {{ link_menu }}</a>
</div>
</li>
Now I've this situation in the menu
It seems that work but not correctly. How I can resolve?
UPDATE 2
Good news!
Since I'm not a django expert, I had a trivial difficulty. By reasoning a little more, I found the solution.
Below the solution:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% for link in link_menu %}
<a class="dropdown-item" href="{{ link.get_absolute_url }}"> {{ link.category_name }}</a>
{% endfor %}
</div>
def get_url(self):
return reverse('product-by-category',args=[self.slug])
{% for menu in links %}
<a class="dropdown-item" href="{{menu.get_url}}">{{menu.category_name}}</a>
{% endfor %}
I added a fixed div. to my header at the top in order to make it stay in place, but other elements keep overlapping it.
I tried using suggested fixes such as using a z-index, but the behaviour of these ruins my modal pop-ups.
Is there an easy way to prevent this from happening? I added a margin-bottom but that doesn't do the trick either.
Here's the code I have:
.home-header {
position: fixed;
width: 100%;
background-color: #fff;
}
and the HTML:
<!DOCTYPE html>
{% load staticfiles %}
<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">
<title>{% block title %}{% endblock %}</title>
<link rel="shortcut icon" href="{% static 'assets/favicon.png' %}"/>
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
<link href="{% static 'css/bootstrap-social.css' %}" rel="stylesheet">
<link href="{% static 'base.css' %}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aladin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
{% block head-extras %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-toggleable-md home-header">
<div class="container">
<a href="/home" class="navbar-brand">
<h1 id="logo" class="nav-wel">Pomodoro</h1>
</a>
{% if request.user.is_authenticated %}
<div class="status">Balance: {{ request.user.profile.coins }}<img class="coin-img" src="{% static 'assets/coin.png' %}" height="40px" width="auto"></div>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle welcome nav-wel" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" id="welcome">Welcome {{ user.get_username }}</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/shop">Shop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/leaderboard">Leaderboard</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/users/change-password">Change Password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/users/logout">Logout</a>
</div>
</li>
</ul>
{% endif %}
</div>
</nav>
{% block content %}
{% endblock %}
<script src="{% static 'js/jquery-3.2.1.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<script src="{% static 'js/pomodoro.js' %}"></script>
</body>
</html>
You can use 2 top level DIVs - one for header, and second for content. Any other stuff must be under content div. If you want your popups to be shown under header - just use absolute position on popup, and set relative to content DIV. Like this:
<div id='header' style='position:fixed;top:0;left:0;width:100%;height:30px;background:pink'>
Header
</div>
<div id='content' style='position:relative;margin-top:30px;background:green' >
Content...
<div id='popup' style='position:absolute;top:0;left:100px;width:100px;height:100px;background:yellow'>Popup</div>
</div>
position: fixed takes the element out of the flow of the rest of the page, so it will overlap unless you position everything else carefully around it - and even then, because fixed positions relative to the viewport not the document, as soon as the user scrolls all bets are off.
If you want to keep it in the flow of the page so that other elements are positioned around rather than behind it, don't use position: fixed (or position: absolute which also allows overlap).