Incorrect item triggered in Bootstrap 4 dropdown menu

I'm currently tackling an issue with a navigation bar that includes two items with drop-down menus. The first drop-down works flawlessly, but the second one always ends up triggering the first. I've conducted tests after removing any additional styles I implemented, yet the problem persists.

There is definitely something obvious that I am missing, but for some reason, I just can't seem to pinpoint it.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="css/app.css" rel="stylesheet" />

<!--  NAVIGATION BAR  -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <h1 class="navbar-brand mb-0">
                    <img class="pigs-logo" src="assets/logo.png">
                </h1>
                <div class="collapse navbar-collapse" id="navbarCollapsing">
                    <div class="nav navbar-nav">
                        <a class="nav-item nav-link active" href="./index.html">
                            Home
                        </a>
                        <a class="nav-item nav-link" href="./tour.html">
                            Tour
                        </a>
                        <a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Media
                        </a>
                        <div class="dropdown">
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
                                <a class="dropdown-item" href="./videos.html">
                                    Videos
                                </a>
                                <a class="dropdown-item" href="./photos.html">
                                    Photos
                                </a>
                                <a class="dropdown-item" href="./audio.html">
                                    Audio
                                </a>
                            </div>
                        </div>
                        <a class="nav-item nav-link" href="./about.html">
                            About
                        </a>
                        <a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Contact
                        </a>
                        <div class="dropdown">
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
                                <a class="dropdown-item" href="./contact.html">
                                    Contact
                                </a>
                                <a class="dropdown-item" href="./booking.html">
                                    Booking
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

htmlcssbootstrap-4dropdown

Answer №1

In my situation, I discovered that the issue stemmed from not enclosing the entire dropdown (both the element triggering it and the menu items) within a 

<div class="dropdown">
. It seemed to work initially, but problems arose when I added a second dropdown and realized it was being activated by the incorrect element.

For Bootstrap 4 dropdowns, it is important to follow this basic structure:

<div class="dropdown">
    <a href="#" data-toggle="dropdown">Trigger Element</a>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Item One</a>
        <a href="#" class="dropdown-item">Item Two</a>
        <a href="#" class="dropdown-item">Item Three</a>
    </div>

</div>

The missing outer <div> caused the issue in my case.

Answer №2

Kindly utilize 

<li class="nav-item"><li>
within the navbar instead of using a direct a tag. Here's an example:

<li class="nav-item">
  <a class="nav-link" href="#">Link</a>
</li>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--  NAVIGATION BAR  -->


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <h1 class="navbar-brand mb-0">
      <img class="pigs-logo" src="assets/logo.png">
    </h1>
    <div class="collapse navbar-collapse" id="navbarCollapsing">
      <div class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="./index.html">
          Home
          </a>
        <li>
        <li class="nav-item">
          <a class="nav-link" href="./tour.html">
          Tour
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Media
          </a>
          <div class="dropdown">
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
              <a class="dropdown-item" href="./videos.html">
              Videos
              </a>
              <a class="dropdown-item" href="./photos.html">
              Photos
              </a>
              <a class="dropdown-item" href="./audio.html">
              Audio
              </a>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="./about.html">
          About
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Contact
          </a>
          <div class="dropdown">
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
              <a class="dropdown-item" href="./contact.html">
              Contact
              </a>
              <a class="dropdown-item" href="./booking.html">
              Booking
              </a>
            </div>
          </div>
        </li>
      </div>
    </div>
  </div>
</nav>

Answer №3

The advice provided in the previous response concerning using a tags for dropdowns in a navigation bar is INCORRECT.

You are perfectly able to utilize solely a tags in the manner you were employing them without encountering any issues.

However, for instances involving multiple drop-down items, where there are more than one drop-down present, it becomes necessary to enclose them in a div with the class btn-group as demonstrated in the code snippet below. (technically speaking, the first drop-down doesn't require this wrapping, but I did it for consistency)

Click "run code snippet" below and expand to full page for live testing:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<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>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <h1 class="navbar-brand mb-0">
            <img class="pigs-logo" src="https://placehold.it/30">
        </h1>
        <div class="collapse navbar-collapse" id="navbarCollapsing">
            <div class="nav navbar-nav">
                <a class="nav-item nav-link active" href="./index.html">
                    Home
                </a>
                <a class="nav-item nav-link" href="./tour.html">
                    Tour
                </a>
                <div class="btn-group">
                    <a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Media
                    </a>
                    <div class="dropdown">
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
                            <a class="dropdown-item" href="./videos.html">
                                Videos
                            </a>
                            <a class="dropdown-item" href="./photos.html">
                                Photos
                            </a>
                            <a class="dropdown-item" href="./audio.html">
                                Audio
                            </a>
                        </div>
                    </div>
                </div>
                <a class="nav-item nav-link" href="./about.html">
                    About
                </a>
                <div class="btn-group">
                    <a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Contact
                    </a>
                    <div class="dropdown">
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
                            <a class="dropdown-item" href="./contact.html">
                                Contact
                            </a>
                            <a class="dropdown-item" href="./booking.html">
                                Booking
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Rails is being overwhelmed by an excessive number of icons being added by Bootstrap

I'm having an issue with adding a user icon to my header. When using Bootstrap, it seems to be adding more icons than I have specified in my code. Can anyone help me figure out what's going on? Thanks in advance! <ul class="nav pull-right"> ...

ruby-on-rails-3csstwitter-bootstraptwitter-bootstrap-rails

Managing concurrent users updating the same form on a web application

Imagine a scenario where user A opens a form with pre-filled data. While user A makes changes to the form data, user B also opens the same form with the data intended for user A. Just as user B begins modifying the data, user A clicks on the submit butto ...

javajavascripthtml

Having trouble getting my JS/CSS code to work for a single image music play/pause button. Any suggestions on how to fix it?

I'm currently working on a project and trying to incorporate a music button into the navigation bar. The goal is for the song to play when clicked, and then pause when clicked again. However, I've encountered some issues with getting it to functi ...

javascripthtmlcssbootstrap-5

The dropdown menu extends beyond the boundaries of the page

I am attempting to incorporate a dropdown menu in the upper right corner. Here is what I currently have: https://i.sstatic.net/soHgc.png The dropdown menu that appears extends beyond the page boundaries. This is the code I am using: <link rel="st ...

htmlcssbootstrap-4

Bootstrap: Altering grid column layout for medium and small/extra-small screens

Hello everyone, I'm having a bit of trouble working with Bootstrap. My goal is to create a container with a row that contains three columns of equal width: <div class="row"> <div class="col-md-4" style="background:red;">logo</div& ...

htmlcssbootstrap-4

What could be causing flexbox not to shrink to fit after wrapping its elements?

My goal is to create a flexbox with a maximum width that allows elements to wrap beyond that width without affecting the overall size of the flexbox's "row." The issue I am encountering is that when an element stretches beyond the maximum width and w ...

htmlcssflexbox

The jCapSLide Jquery Plugin is experiencing compatibility issues in Chrome browser

While this JQuery plugin works perfectly in Internet Explorer and Firefox, it seems to be malfunctioning in Chrome. The plugin is not being recognized at all by Chrome, and the captions are appearing below the image instead of on top with a sliding effect. ...

javascriptjquerycssgoogle-chrome

Issue with div refresh switching from $.post to $.get using jQuery and duplicate div

I created this code to trigger the display of another div (#comments-popup) when hovering over #story-comments-text. This div then makes an $.get request for its HTML code. The first part is functioning correctly. However, I encounter an issue when makin ...

jqueryajaxposthtmlget

Splitting a td tag into multiple columns dynamically with Angular

I am attempting to dynamically split the table element into separate columns. My desired layout should resemble this: https://i.sstatic.net/C81tg.png The values for name and surname are fixed at 1, but the values for subjects and grades can vary (there ma ...

javascripthtmlangulartypescripthtml-table

Tips for consistently positioning a div beneath another div in HTML/CSS

Would appreciate it if you could review this. <.div id="main"> Main Div <./div> <br/> <.div id="sub">Sub-Division<./div> ...

jqueryajaxcss

"Customize your search experience with a bootstrap search bar featuring multiple input fields

Currently working on a website using Bootstrap and trying to create a filter bar for the items displayed on the page. I am looking to include one or more input fields (highlighted in red) and one or more dropdowns (highlighted in blue). The width of the ba ...

javascripthtmltwitter-bootstrapcsstwitter-bootstrap-3

Utilizing jQuery to expand a collapsible section when another checkbox's event is triggered

For more details, please visit: https://jsfiddle.net/3msLwfu6/1/ The first tab is collapsible and contains nested collapsibles called "Items". Each "Item" can be collapsed or expanded using a checkbox on its header that utilizes bootstrap controls. Add ...

javascriptjqueryhtml

Distinguishing background colors depending on the browser's compatibility with CSS properties

I've successfully designed a polka dot background using pure CSS: .polka-gr{ background-image: radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0); background-size: 30px 30px; background-positio ...

cssprogressive-enhancement

What is causing the bootstrap switch to not align horizontally with the other elements within the div?

Here is the code snippet that I am working with: .global-wrap { display: flex; flex-direction: row; align-items: center; justify-content: center; } .header { width: 1024px; background-color: purple; padding: 7px; margin: 0; } div { ...

htmlcssbootstrap-5

Tips for preventing bootstrap from resizing the top card image too large while maintaining consistency across various image files

Hello, I'm facing an issue with bootstrap image sizing. When I insert images with smaller dimensions into a card, they are being blown up to fit the card which results in them becoming blurry. Here is the HTML code that's causing the problem: { ...

htmlcssimagetwitter-bootstrapbootstrap-4

Discovering the method to retrieve the information of the selected item in AngularJS

My table is using the ng-repeat in the <tr> element to load content dynamically from a JSON file. Each row has a unique ID in the table. I need a way to access the inner HTML of the respective row's ID column when it is clicked. Is there a solut ...

javascripthtmlangularjs

Is there a way to modify the variable in order to switch the font of the heading every second using CSS and JavaScript?

I'm trying to create a heading that changes fonts every second, but I'm having trouble changing the variable to set it to another font. Check out my code here. Despite watching tutorials, everything seemed too confusing. var root = document.q ...

javascripthtmlcss

Utilizing JQuery click function to dynamically modify CSS styles

Snippet: <div id="r1242"> <img class="trans" src="http://sakshamcomputer.com/images/printerLogo.jpg"/> <div class="labels" id="p1242"> <strong>Available Printers:</strong><br><br> ...

jqueryhtmlcssonclick

Change the color of the navbar when scrolling using bootstrap and jquery

Using Bootstrap to design a navigation bar, I have two main goals: I want the navbar to change color when the page is scrolled down by 20%, and then revert back to its original color when scrolling back to the top. When the collapse featu ...

javascriptjqueryhtmlcssbootstrap-4

Unable to get CSS hover effect to overlay

Can anyone help me figure out why the .cd-img-overlay class is not functioning properly when I hover over a list item? Check out my live code here CSS: #cd-team .cd-img-overlay { position: absolute; top: 0; left: 0; width: 100%; h ...

htmlcss