Bootstrap dropdown appearing to side of navbar

Finn · November 10, 2022, 3:10pm

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

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

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 &copy 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 &amp; 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

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.

Finn · November 11, 2022, 2:53pm

That did the trick, Paul. Thanks so much for your help!

system · February 10, 2023, 9:54pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Drop down div under another div HTML & CSS	14	22992	May 19, 2019
How do you change styling of dropdown menu items in Bootstrap 4? HTML & CSS bootstrap	8	13431	January 1, 2021
Adding dropdown to menu HTML & CSS	5	2154	July 19, 2015
CSS Dropdown does not appear underneath the button it's supposed to HTML & CSS html5 , css	6	2306	February 27, 2017
How to have navbar from right to left? HTML & CSS	13	10868	January 8, 2020

Bootstrap dropdown appearing to side of navbar

Related topics