Finn
November 10, 2022, 3:10pm
#1
I have template that adds a navbar and uses Bootstrap 4. For a couple of navbar links I have a dropdown. For the first dropdown, under the Admin link. I want the dropdown menu to appear directly below the link. However the dropdown menu is appearing on the left-hand side of the page.
Any ideas to get this to appear below the Admin link?
The template:
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock title %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
</head>
<section class="header">
<div class="header-top-line bg-primary">
<div class="container">
<div class="row">
<nav class="navbar navbar-expand navbar-dark navbar-short justify-content-between w-100">
<a class="nav-link text-white">
<span class"text-uppercase"></span>
</a>
</nav>
</div>
</div>
</div>
<div class="header-main bg-white">
<div class="container">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-light w-100">
<a class="navbar-brand" href="{% url 'home' %}">{{ cname.company_name }}</a>
{% if user.is_authenticated %}
<ul class="navbar-nav mr-auto">
<li class="nav-item"></li>
</ul>
{% endif %}
<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 ml-auto">
<li class="nav-item">
{% if perms.accounts.can_add_user %}
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item"
href="{% url 'employee_add' %}">Add User</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'admin:index' %}">
Admin Panel</a>
</div>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" text="uppercase" data-toggle="none" href="/">
Home
</a>
</li>
<a class="nav-link" text="uppercase" data-toggle="none" href="/directory/">
Directory
</a>
</li>
<li class="nav-item">
<a class="nav-link" text="uppercase" data-toggle="none" href="/documents/">
Company Documents
</a>
</li>
<li class="nav-item">
<a class="nav-link" text="uppercase" data-toggle="none" href="/projects/">
Projects
</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item"
href="">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'account_logout' %}">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'account_login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'account_signup' %}" class="btn btn-primary ml-2">
Sign up</a>
</form>
{% endif %}
<form class="form-inline my-2 pl-2 my-lg-0" method=GET action="{% url 'search_view' %}">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="q">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</div>
</section>
</html>
PaulOB
November 10, 2022, 9:47pm
#2
Hi,
You will need to post the actual (view source) html so that we can see properly what we are dealing with.
From first glance I can see that you have not labelled the dropdowns correctly as you are using the same id for both which is not allowed.
id=“navbarDropdown”
Give both dropdowns unique ids and match also the ids to the aria-labelledby attribute on the dropdown itself.
Finn
November 10, 2022, 11:49pm
#4
Thank you for taking a look at this Paul. I changed the dropdown labels as you suggested but I am still seeing the same behavior.
Here is the view source:
<!-- templates/public_site/add_employee.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add Employee</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link type="text/x-scss" href="/static/bootstrap/scss/bootstrap.scss" rel="stylesheet" media="screen">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
<link rel="shortcut icon" type="image/png" href="/static/core_images/OH_favicon.png"/>
<!-- fontawsome -->
<link rel="stylesheet" type="text/css" href="/static/fontawsome6-free/css/all.css"/>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id="></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-VJRXH7YFXZ');
</script>
<!-- Google Font - roboto -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<wrapper class="d-flex flex-column">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
</head>
<section class="header">
<div class="header-top-line bg-primary">
<div class="container">
<div class="row">
<nav class="navbar navbar-expand navbar-dark navbar-short justify-content-between w-100">
<a class="nav-link text-white">
<span class"text-uppercase"></span>
</a>
</nav>
</div>
</div>
</div>
<div class="header-main bg-white">
<div class="container">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-light w-100">
<a class="navbar-brand" href="/">company one</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item"></li>
</ul>
<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 ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="adminDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="adminDropdown">
<a class="dropdown-item"
href="/manage/add_employee/">Add User</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/admin/">
Admin Panel</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" text="uppercase" data-toggle="none" href="/">
Home
</a>
</li>
<a class="nav-link" text="uppercase" data-toggle="none" href="/directory/">
Directory
</a>
</li>
<li class="nav-item">
<a class="nav-link" text="uppercase" data-toggle="none" href="/documents/">
Company Documents
</a>
</li>
<li class="nav-item">
<a class="nav-link" text="uppercase" data-toggle="none" href="/projects/">
Projects
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
co1admin
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item"
href="">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/accounts/logout/">
Log Out</a>
</div>
</li>
</ul>
<form class="form-inline my-2 pl-2 my-lg-0" method=GET action="/search/">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="q">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</div>
</section>
</html>
<main class="flex-fill">
<div class="row">
<div class="col-12">
<br />
</div>
</div>
<div class="section-container container">
<div class="general-form pl-md-5 pr-md-5">
<h2>Add Employee</h2>
<form action="" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="NsQvslW2R0PyifFepGtMfGEwLGvUXdBx0KNJxAgFrldrtqNxOT1yD5SmSy8klDx7">
<div id="div_id_username" class="control-group"> <label for="id_username" class="control-label requiredField">
Username<span class="asteriskField">*</span> </label> <div class="controls"> <input type="text" name="username" maxlength="150" autofocus class="textinput textInput" required id="id_username"> <p id="hint_id_username" class="help-block">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</p> </div> </div> <div id="div_id_email" class="control-group"> <label for="id_email" class="control-label ">
Email address
</label> <div class="controls"> <input type="email" name="email" maxlength="254" class="emailinput" id="id_email"> </div> </div> <div id="div_id_full_name" class="control-group"> <label for="id_full_name" class="control-label requiredField">
Full name<span class="asteriskField">*</span> </label> <div class="controls"> <input type="text" name="full_name" maxlength="250" class="textinput textInput" required id="id_full_name"> </div> </div> <div id="div_id_age" class="control-group"> <label for="id_age" class="control-label ">
Age
</label> <div class="controls"> <input type="number" name="age" min="0" class="numberinput" id="id_age"> </div> </div> <div id="div_id_password1" class="control-group"> <label for="id_password1" class="control-label requiredField">
Password<span class="asteriskField">*</span> </label> <div class="controls"> <input type="password" name="password1" autocomplete="new-password" class="textinput textInput" required id="id_password1"> <p id="hint_id_password1" class="help-block"><ul><li>Your password can’t be too similar to your other personal information.</li><li>Your password must contain at least 8 characters.</li><li>Your password can’t be a commonly used password.</li><li>Your password can’t be entirely numeric.</li></ul></p> </div> </div> <div id="div_id_password2" class="control-group"> <label for="id_password2" class="control-label requiredField">
Password confirmation<span class="asteriskField">*</span> </label> <div class="controls"> <input type="password" name="password2" autocomplete="new-password" class="textinput textInput" required id="id_password2"> <p id="hint_id_password2" class="help-block">Enter the same password as before, for verification.</p> </div> </div>
</br>
<input type="submit" value="save">
</form>
</div>
</div>
</main>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OHive</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link type="text/x-scss" href="/static/bootstrap/scss/bootstrap.scss" rel="stylesheet" media="screen">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
</head>
<section class="footer">
<div class="container py-19 py-sm-23 py-lg-25">
<div class="row align-items-center">
<div class="col-12 col-md-6 col-lg-5 mb-14 mb-md-0">
<div class="d-flex align-items-center justify-content-center justify-content-md-start">
<h2>Ohive</h2>
</div>
<div>Copyright © 2021</div>
</div>
<div class="col-12 col-lg-2 text-center d-none d-lg-block">
</div>
<div class="col-12 col-md-6 col-lg-5 text-center text-md-right">
<ul class="footer-menu">
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/terms">Terms & Conditions</a></li>
</ul>
</div>
</div>
</div>
</section>
</html>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
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>
</wrapper>
</body>
</html>
PaulOB
November 11, 2022, 9:32am
#5
You need to add the class of dropdown to the list parent or you don;t get a stacking context.
eg. Do this. <li class="nav-item dropdown">
In here:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="adminDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
Do the same for the other dropdown and then it will display as expected.
1 Like
Finn
November 11, 2022, 2:53pm
#6
That did the trick, Paul. Thanks so much for your help!
