Dilemma: Overlapping Dropdowns on a Bootstrap Navbar Floated right

When using Bootstrap 3.2 and applying navbar-right to two different dropdown menus, they tend to overlap slightly. The code snippet below is taken directly from the Dropdown examples on the official Bootstrap website, but with the modification of having two dropdowns on the right side.

Please refer to the JSFiddle demo below. Ensure that the Result panel is wide enough to display the navbar, then hover over Dropdown 3 and 4 to see their borders overlapping.

If you have any suggestions or workarounds for this issue, they are greatly appreciated.

http://jsfiddle.net/codespelunker/ysqjt7fv/2

<ul class="nav navbar-nav navbar-right">
    <li id="fat-menu" class="dropdown"> <a href="http://getbootstrap.com/javascript/#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4 <span class="caret"></span></a>

        <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
            </li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a>
            </li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a>
            </li>
        </ul>
    </li>
</ul>
<ul class="nav navbar-nav navbar-right">
    <li id="fat-menu" class="dropdown"> <a href="http://getbootstrap.com/javascript/#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <span class="caret"></span></a>

        <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
            </li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a>
            </li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a>
            </li>
        </ul>
    </li>
</ul>

Answer №1

Oh, it turns out the problem was a minor one. The issue arises when declaring the second navbar-right div.

 <ul class="nav navbar-nav navbar-right">
    <li id="fat-menu" class="dropdown"> <a href="http://getbootstrap.com/javascript/#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4 <span class="caret"></span></a>
       // This one was for dropdown 4
       <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
          </li>
           .
           .

        </ul> <--------------------------------------  here
        <ul class="nav navbar-nav navbar-right"> <---  is the problem
               //This one was for dropdown 3
                <li id="fat-menu" class="dropdown"> <a href="http://getbootstrap.com/javascript/#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <span class="caret"></span></a>

            <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
               </li>
               .

             </ul>
          </li>
        </ul>

If you remove those two lines, they should no longer overlap and appear in the correct order.

Refer to this fiddle for clarification

The root of the issue was that both were being aligned to the right as separate divs instead of having one div align both elements to the right.

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

Seamless Shift: Effortless Transition

I'm attempting to develop a unique hover effect for a button. Initially, the button only displays an outline and its name inside. However, upon hovering over the button, I want it to smoothly transition to my gradient background. Despite trying multip ...

How can I personalize the HTML code of images added to my WordPress articles?

I've been on an extensive search trying to find a solution for this issue. I'm aiming to modify the markup of an uploaded image in WordPress from its current form: <div id="attachment_906" style="width: 590px" class="wp-caption aligncenter"&g ...

The stop-color property is not functioning as expected in CSS/SVG

Here is the code I am currently working with: <?xml version="1.0" standalone="yes"?> <svg xmlns="http://www.w3.org/2000/svg" width="360" height="240"> <style>stop{stop-opacity:1}circle{fill:url(#r)}</style> <defs> <radialG ...

What has caused the space between these articles?

I have created a section containing three articles and I am confused about the margin/padding between the articles: This is my HTML code: <section id="home"> <article> <h1>Overview</h1> </article> <article> <h1& ...

Creating a carousel with three thumbnails arranged in two rows

Currently, I am using a slider for my thumbnails. If you want to check out the code for this thumbnail slider, click on this link: thumbnails slider code My goal is to display 6 thumbnails in total, with 3 thumbnails shown in each row (2 rows total). Add ...

Step-by-step guide to implementing a user-friendly search input field using the powerful AngularJS material design framework

I am searching for an effortless method to implement a feature similar to the expandable search text field in angular-mdl. By clicking on a search button, it will expand into a text field. <!-- Expandable Textfield --> <form action="#"> < ...

Letters are frolicking in varying sizes and designs

Currently, I am encountering a strange issue with the text on my webpage. Some fonts are displaying with completely different shapes and sizes despite using <meta charset="UTF-8"> to ensure font consistency. Unfortunately, this did not resolve the pr ...

Designing a nested box layout with bootstrap HTML/CSS styling

Can anyone provide guidance on how to create a HTML/CSS layout similar to the image below? I am specifically struggling with designing the silver "Add corkscrew" box, a white box beneath it, and then another silver box nested within. Any suggestions on ho ...

Getting rid of padding in Material UI SwipeableViews in React

Seeking assistance with the React Tabs/SwipeableViews component. I used the MaterialUI Tabs as a reference and it mostly works fine. However, I am facing a minor issue with padding in the content section. Current outcome: Current Outcome The button ...

No need for jQuery with this scrolling image gallery

I recently created a horizontal scrolling image gallery with thumbnails underneath. The goal is to click on a thumbnail and have the corresponding image scroll into view. Here's the HTML setup: <div class="images_container"> <img id="imag ...

Troubles with the placement of the navbar icon in responsive design

After following a tutorial on responsive navigation bars (https://www.w3schools.com/howto/howto_js_topnav_responsive.asp), I successfully implemented the navbar on my website. However, I encountered an issue with the icon placement when clicked. Here is ho ...

Do styled components have the capability to perform calculations similar to SCSS?

Using SCSS, I have the power to work wonders with CSS: @for $i from 1 through $total-items { li:nth-child(#{$i}) { animation-delay: .25s * $i; } } I am currently developing a React App that utilizes styled components. Is it possible to achieve th ...

Determining the identity of an HTML element using its surrounding values

I have a webpage with a table displaying various services and their corresponding download buttons. Here is an example of the content: nov. service 1 [ click to download pdf ] nov. service 5 [ click to download pdf ] nov. service 3 [ ...

Fix background transition and add background dim effect on hover - check out the fiddle!

I'm facing a challenging situation here. I have a container with a background image, and inside it, there are 3 small circles. My goal is to make the background image zoom in when I hover over it, and dim the background image when I hover over any of ...

Is there a way to apply the style property only when a component is hovered in Next.js?

I would like the ability to hover over a component and have it display with unique CSS characteristics. For instance, if I hover on item A, I only want item A to stand out from the rest. Currently, I am using this method of changing the element's bac ...

What is the procedure for adding a background to a primeNg Tree component?

Working with Angular CLI 6 and primeNg version 6.0.1 I have been attempting to customize the background of the tree component without success. When I try using style="background:red" in the HTML file, the tree display becomes distorted with a height of on ...

Is it deemed as an anti-pattern to establish directives for styling?

Currently, I am in the midst of developing a specialized component UI library for a specific project I'm involved in. This library will consist of unique stylized components with elements that are reused throughout. As I work on this project, I find ...

What's the best way to combine cells using HTML, CSS, and PHP?

Can anyone assist me with merging cells containing identical values in specific columns? <td style="text-align: center; font-size: 9.5px;">{{$endereco->quadra}}</td> <td style="text-align: center; font-s ...

Adjusting the height of a container dynamically in React while flex items wrap using CSS

In my React project, I have a container called "answers-container" with multiple buttons inside it, laid out using flexbox with flex-wrap: wrap to allow them to wrap onto the next line when the container width is exceeded. However, I'm facing an issu ...

Choose a group of radio buttons inside a container when a button is clicked

I have a bunch of containers containing radio buttons. The goal is for the container of a selected radio button to appear different: input[type="radio"]:checked+.container { border: 5px solid red; } <div class="container"> <input class="btn ...