Displaying identical lists in two dropdowns using Bootstrap

I need to display two dropdown menus side by side in a preheader section. Here is the current code snippet:

<a class="nav-link dropdown-toggle" href="<?php echo $baseurl;?>verification" data-toggle="dropdown" role="button">Verification</a>
<ul class="dropdown-menu" style="background-color: #000080;">
    <li class="nav-item"><a class="nav-link" href="<?php echo $baseurl;?>verification/certificates">Verify Certificates</a></li>
    <li class="nav-item"><a class="nav-link" href="<?php echo $baseurl;?>verification/membership">Verify Membership</a></li>

</ul>
<a class="nav-link2 dropdown-toggle" href="<?php echo $baseurl;?>opportunities" data-toggle="dropdown" role="button">Opportunities</a>
<ul class="dropdown-menu" style="background-color: #000080;">
    <li class="nav-item"><a class="nav-link2" href="http://robotics.uiu.ac.bd/form/wanted_graphicdesigner">Graphic Designer Wanted</a></li>
</ul>

However, I am facing an issue where the second dropdown menu is not functioning properly and shows the contents of the first dropdown. Ideally, the second dropdown should display "Graphic Designer Wanted," but it displays "Verification" instead. What could be causing this problem? How can I resolve this issue by assigning a unique identifier?

cssbootstrap-4dropdown

Answer №1

To organize the dropdowns better, consider separating them and placing each in its own <div> element:

<div>
    <a class="nav-link dropdown-toggle" href="<?php echo $baseurl;?>verification" data-toggle="dropdown" role="button">Verification</a>
    <ul class="dropdown-menu" style="background-color: #000080;">
        <li class="nav-item"><a class="nav-link" href="<?php echo $baseurl;?>verification/certificates">Verify Certificates</a></li>
        <li class="nav-item"><a class="nav-link" href="<?php echo $baseurl;?>verification/membership">Verify Membership</a></li>
    </ul>
</div>
<div>
    <a class="nav-link2 dropdown-toggle" href="<?php echo $baseurl;?>opportunities" data-toggle="dropdown" role="button">Opportunities</a>
    <ul class="dropdown-menu" style="background-color: #000080;">
        <li class="nav-item"><a class="nav-link2" href="http://robotics.uiu.ac.bd/form/wanted_graphicdesigner">Graphic Designer Wanted</a></li>
    </ul>
</div>

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

What is the best way to assign two styles with the same value in a single line of code?

Can you suggest a simpler method for expressing left:15%;right:15%, such as using left,right:15% or something equivalent? Your assistance is greatly appreciated! ...

css

The attribute value in an input field is not effective in Angular

My routine usage involves employing an input tag and attempting to include text using the value attribute, but it seems to be malfunctioning. Here's the line of code in question: <input class="form-control input-sm" value="14" type="number" ng-mod ...

htmlcssangularjsinput

Transforming an image by masking it to create a binocular-like view

I've been experimenting with creating a unique visual effect where an image is revealed through a binocular-shaped element that follows the mouse cursor. The circular part of the element moves along with the cursor, unveiling parts of the image as it ...

jquerycsssvgmasking

Disabling the "X mark" feature while in IE11 compatibility mode

Currently working with GWT and attempting to remove the 'x mark' that appears in IE11. I tried using the CSS code below, but was unsuccessful in disabling the 'x mark': ::-ms-clear { display: none; width : 0; height: 0; } ...

htmlcssgwt

Steps to animate a div expanding to fit its content dimensions

I'm looking for a way to animate the opening of a div so that it adjusts to the size of its content. The content is fetched from a separate search using .load, which means it could be just a single line (no result) or multiple results that vary in hei ...

jquerycssanimation

The spacing between elements in Flexbox is too excessive, creating an overly wide gap

How can I maintain a fixed 40 pixel gap between columns in flexbox without it increasing as the screen width widens? (I apologize for the brevity of this description, but there are no additional details to provide at this time) .browser-box { max-wid ...

htmlcssflexbox

The behavior of Elementor lightbox buttons upon being clicked

When using Android, I've noticed that the lightbox briefly displays a semitransparent cyan bar on the left and right buttons when they are pressed. Is there a way to control or prevent this behavior? Any suggestions would be appreciated! Thanks in adv ...

javascriptcsswordpresslightboxelementor

What is the best way to ensure that an input group expands to fill the entire horizontal space

I am currently utilizing bootstrap 4 and have a responsive navbar for smaller screens. On this navbar, I am trying to implement a search input group that spans the full width from left to right up until the menu bar icon on the right side. You can view my ...

csstwitter-bootstrapflexbox

Trouble with CSS navigation

Hello! In Dreamweaver, I have completed the design for my navigation bar. Here is how it looks: However, when I view it in Firefox, the navigation appears all jumbled up. It's quite frustrating... Below is the code that I'm using: #navbar { ...

jqueryhtmlcss

What is the best way to accomplish a smooth transition of background colors similar to this design

I was browsing different websites and stumbled upon this amazing background color transition that caught my attention. I really liked it and now I want to create something similar on my own website. Despite my best efforts, I haven't been able to achi ...

javascriptjqueryhtmlcss

Achieving perfect alignment of two images within a block and maintaining their center position even when resizing

While working within a Wordpress post, my goal is to insert two images side by side with the block of images centered, one aligned left and the other aligned right (which I have achieved). As the page size decreases, I want the images to stack on top of e ...

htmlcsswordpress

Arrangement of Columns in a Vertical Bootstrap Layout

When the xs layout displays as expected, how can I move the sidebar up to the navigation in order to eliminate the gap between them in the lg layout? <div class="row"> <div class="col-xs-12 col-lg-3 col-lg-push-9"> navigation & ...

htmlcsstwitter-bootstrap

Adjust the size of a div using absolute positioning

Can a div with absolute position be resized? I need this pink modal to maintain the same width as the input and resize accordingly. This modal will be utilized in a dropdown component, so it should resize along with the input. Moreover, is using absolute ...

csscss-grid

Any tips or hacks for successfully implementing vw resizing on the :before pseudo-element in webkit browsers?

When using vw sizes on webkit browsers, a well-known bug can occur where they do not update when the window is resized. The typical workaround for this issue has been to employ javascript to force a redraw of the element by reassigning the z-index upon res ...

javascriptjqueryhtmlcsswebkit

Building a matrix of checkboxes

I am looking to design a grid of checkboxes that are displayed in columns, with 5 checkboxes in each column. <ul class="checkbox-grid"> <li><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</lab ...

css

What could be causing the modal not to close in Laravel Livewire?

I am currently using Laravel Livewire to handle record deletions in two database tables. However, I have encountered an issue with the modal not closing properly after deletion is successful. Interestingly, when I comment out a line of code that deletes d ...

laravelbootstrap-4eloquentbootstrap-modallaravel-livewire

When rotating, the SVG ellipses move towards the upper left corner

Why does my animated lp end up in the top left corner instead of centering? I've tried using transform-origin: center; but it's not working. Any help would be greatly appreciated. Thank you in advance. #Component_6_2{ -webkit-transform-orig ...

htmlcssanimationsvgtransform

Bootstrap 4 Vertical Timeline Layout Showing Uneven Columns Due to Large Margins

I'm currently working on my very first website and trying to implement a vertical timeline using Bootstrap 4. My goal is to have the timeline bar situated between two columns. However, I'm encountering an issue where I can't align text in th ...

htmlcssbootstrap-4timelinemargins

Implementing inline scrolling using CSS

My objective is to have each article added to the container div, "inlineExample", load to the right without any vertical overflow. The CSS should be able to handle each additional article dynamically as they are added to the right. <div id="inlineExamp ...

javascripthtmlcssasp.net-mvcweb

Adjusting the border size of an SVG without using the viewbox

Currently, I am working with 2 SVGs where one has a viewbox and the other doesn't. They both are set to be 100% width of the parent element. The first SVG scales according to its viewbox while the second one scales according to the height of the paren ...

htmlcss