Troubleshooting a problem with the Bootstrap dropdown menu

Can anyone assist with an issue regarding Bootstrap 4.4.1? I am facing a problem where two consecutive dropdown links+menus are not displaying correctly. The second dropdown menu is showing the content of the previous link instead of its own, even though the mappings are correct.

Here is the code snippet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<a class="dropdown-toggle" 
href="#" title="Actions" 
role="button" 
id="dropdownActionMenu13"
data-toggle="dropdown" 
aria-haspopup="true" 
aria-expanded="false">actions</a>&nbsp;
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownActionMenu13">
<a class="dropdown-item small" href="scaffold-category/action/13/hello_world">Hello World</a>
</div>

<a class="dropdown-toggle" 
href="#" title="Related" 
role="button" 
id="dropdownActionGoTo13"
data-toggle="dropdown" 
aria-haspopup="true" 
aria-expanded="false">related</a>&nbsp;
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownActionGoTo13">
<a class="dropdown-item small" href="scaffold-category/by/category/13">Category list</a>
<a class="dropdown-item small" href="scaffold-post/by/category/13">Post list</a>
</div>

<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Your help would be greatly appreciated :)

Thank you in advance for your assistance.

cssbootstrap-4

Answer №1

To enhance your navigation, consider utilizing bootstrap navigation classes. You can either separate elements with <div> or use the <ul><li> approach:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
     <div>
        <a class="dropdown-toggle" href="#" title="Actions" role="button" id="dropdownActionMenu13" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">actions</a>&nbsp;
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownActionMenu13">
            <a class="dropdown-item small" href="scaffold-category/action/13/hello_world">Hello World</a>
        </div>
    </div>
    <div>
        <a class="dropdown-toggle" href="#" title="Related" role="button" id="dropdownActionGoTo14" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">related</a>&nbsp;
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownActionGoTo14">
            <a class="dropdown-item small" href="scaffold-category/by/category/13">Category list</a>
            <a class="dropdown-item small" href="scaffold-post/by/category/13">Post list</a>
        </div>
    </div>

For more guidance on placing the Navbar effectively, refer to this link:

https://getbootstrap.com/docs/4.4/components/navbar/

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

Tips for automatically displaying user text based on its natural direction

Looking for a way to properly display user inputted text in Unicode based on its general direction, rather than defaulting to left-to-right. An issue arises when dealing with Arabic text as shown below, where the English word (4th) is split apart: اُر ...

csshtmlunicodebidi

What is the method for activating -webkit-animation/transition-property for :before and :after pseudo elements?

Is there a way to activate the -webkit-animation for :before and :after pseudo elements? It seems that in this demo http://jsfiddle.net/4rnsx/, the animation is not working for :before and :after elements. I am attempting to make it work using Mootools ...

csswebkitcss-transitionspseudo-element

What could be the reason why both the add and remove functions are unable to work simultaneously within a JavaScript function?

Hi there! I recently started diving into JavaScript and encountered a little hiccup. I've been working on a dice game where images change randomly whenever a button is clicked. The images transition from one to another, but I wanted to add a rolling ...

javascripthtmlcsscss-transitions

"ExceptionThrownByMoveTargetOutOfBounds in Selenium WebDriver for IE9 and Firefox

Having trouble with the FireFox/IE9 driver in Selenium? When using the Actions class and its moveToElement method, I keep encountering a MoveTargetOutOfBoundsException error. Despite trying different solutions like Coordinates, Point, and javascriptexecuto ...

javascriptcssinternet-explorerfirefoxselenium

Creating a New Section in your HTML Table

Can a page break be implemented in an HTML table? I've attempted to add page breaks to the following HTML: <html> <title>testfile</title> <meta http-equiv="expires" content="0" /> <meta http-equiv="cache-contr ...

htmlcss

Display the data count of a filtered list in Vue 2

As a newcomer to Vue, I am facing what seems like a simple and common task but the solution is escaping me. I need to filter some data and then display the count in a component. This is the HTML structure: <main class="container-fluid"> <div ...

javascriptvue.jsbootstrap-4vuejs2vue-component

What is the best way to adjust the font weight of a Bootstrap 4 modal header?

Is there a way to adjust the font weight in the header of a Bootstrap 4 modal? As an added challenge, I'm also interested in changing the font color to #7f7f7f... <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" r ...

cssbootstrap-4bootstrap-modal

Elements styled as inline blocks with static dimensions, irregular in size

Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless ...

htmlcss

Guide to collapsing the hamburger style menu in React-Bootstrap when a link is clicked within it

In my development projects, I utilize the react-bootstrap library and am currently working on a website where all the content is contained on a single page. As a result, all of my links point to different scroll positions on the same page. However, I have ...

htmlreactjsbootstrap-4react-bootstrap

The table is too large for the parent div in which it is placed, causing

Check out this example I have for putting a table in a div and making it fill the div: ex1_jsfiddle table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; height: 100%; table-layout: fixed; } td, th { border: 1px sol ...

htmlcss

Apply CSS styling to the entire element when hovering over its pseudo-element 'after'

I am working on a button/speech bubble design with a unique hover effect. Here is the current setup: https://i.stack.imgur.com/4OrpL.png Here is the code snippet for the button: <div value="GO" id="go-div" class="bubble"> <input type="submit ...

htmlcss

Modify the surrounding container of the chosen selector

I have a complex website with multiple containers. My objective is to apply a color to a container with the class "colorme" when another container, located far away from it, has the class "active". Here is how the code is structured: .tooltip:has(tool ...

htmlcss

Limit a div to only accept a specific stylesheet

Currently, I am immersed in a project that involves HTML5, MVC 4, CSS 3, JQuery, and LINQ. We have meticulously designed styles for various ui, li, and other html controls within the project. However, I now face the challenge of integrating a JQ Grid (htt ...

htmlcss

Uniform dimensions for HTML tables

When creating an HTML document with consecutive tables that need to be formatted the same way, it can be challenging. Browsers will often render columns of one table wider than another simply due to content width. The typical solution is to hard-code colu ...

csshtmlhtml-table

How can I retrieve the reference number of an item by clicking a button within a list item in an unordered

Presented here is a collection of data points and a button nested within an ul <ul> <li class="mix" category-1="" data-value="600.35" style="display:block;"> <figure> <figcaption> <h3> ...

javascriptjqueryhtmlcss

Having trouble loading Yeoman Webapp SASS

Every time I try to build a web application using 'yo webapp', I encounter a 404 Error. GET http://localhost:9000/styles/main.css 404 (Not Found) I removed compass from the project, but that shouldn't be causing the issue, correct? ...

csssasshttp-status-code-404

Is there a way to adjust the size of text to perfectly fit within a fixed size div?

I find this scenario quite common, but I haven't come across any solutions for it: Let's say there is a fixed-width div that displays dynamically changing numbers. How can we adjust the font size so that larger numbers fit well within the fixed ...

javascriptcsshtml

How to Implement Snap-Enabled Dragging in a Container Using jQuery UI

Issue Description (Fiddle): I am using the jQuery UI's .draggable() function to make the red element snap inside the blue container. However, it is snapping to one edge only instead of completely fitting inside (both edges). It requires further dragg ...

javascriptjqueryhtmlcssjquery-ui

Issues with displaying form/button glyphicon when using a fixed table header in Bootstrap

I have a situation where I have a table with a fixed header. In one of the columns, there are delete buttons within a form. The table structure is as follows: <div class="panel panel-default table-responsive fixedHeader"> <!-- Table --> &l ...

htmlcss

Ways to create spacing between property columns in MUI grid fashion

Is there a way to achieve space-between alignment when elements are stacked vertically in MUI Grid instead of using flex? I've come across suggestions involving giving flex:1 and height:100%, but I'm specifically interested in achieving this with ...

cssmaterial-ui