Initiate Bootstrap 4 dropdown menus from the initial menu point

I need the dropdown menus to align with the position of the first dropdown. There are multiple dropdowns on the page. Check out the screenshot for reference.

JSFiddel: https://jsfiddle.net/kfh9Lbep/

Any ideas on how to achieve this alignment?

<div class="container">
  <div class="row">
    <div class="col-12">
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <a class="navbar-brand" href="#">Logo!</a>
        <ul class="navbar-nav position-static">
          <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
              Dropdown 1
            </a>
            <div class="dropdown-menu w-100">
              <a class="dropdown-item" href="#">Link 1</a>
              <a class="dropdown-item" href="#">Link 2</a>
              <a class="dropdown-item" href="#">Link 3</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
              Dropdown 2
            </a>
            <div class="dropdown-menu w-100">
              <a class="dropdown-item" href="#">Link 1</a>
              <a class="dropdown-item" href="#">Link 2</a>
              <a class="dropdown-item" href="#">Link 3</a>
            </div>
          </li>
        </ul>
      </nav>  
    </div>  
  </div>  
</div>
jquerytwitter-bootstrapcssbootstrap-4

Answer №1

Here is some sample HTML code:

<div class="container">
  <div class="row">
    <div class="col-12">
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <a class="navbar-brand" href="#">Logo!</a>
        <ul class="navbar-nav position-static">
          <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
              Dropdown 1
            </a>
            <div class="dropdown-menu w-100">
                <a class="dropdown-item" href="#">Link 1</a>
              <a class="dropdown-item" href="#">Link 2</a>
              <a class="dropdown-item" href="#">Link 3</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
              Dropdown 2
            </a>
            <div class="dropdown-menu w-100 left-taken">
              <a class="dropdown-item" href="#">Link 1</a>
              <a class="dropdown-item" href="#">Link 2</a>
              <a class="dropdown-item" href="#">Link 3</a>
            </div>
          </li>
        </ul>
      </nav>  
    </div>  
  </div>  
</div>

And here is a CSS code snippet:

.left-taken {
  left: -7.5rem;
}

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

Implementing a click event to apply an overlay over a div using jquery

When hovering over image1, image2 should appear with a close (X) button in the bottom right corner. Clicking the close button will make image2 disappear and show image1 again. ...

jquery

What is the best way to position an element on the left side of the navbar without having it animated?

Could someone assist me in placing the Life's Good logo on the left side of the nav bar without applying the animation from the "btn" class? Below is a snippet of my code with an example where I want the logo highlighted in Yellow: * { padding:0; m ...

htmlcssnavbar

dynamic color-changing feature on the menu

I have a navigation bar on my website with a set of sub-menus that appear when hovered over. I want to make the navigation bar change color dynamically each time it is hovered over. Additionally, I would like to add a range of colors to choose from. For ...

htmlcssmenucolorshover

Include an icon in the header of a jumbotron

Here is the jumbotron configuration I am working with: https://i.stack.imgur.com/JQGpA.png This jumbotron was generated using the following code: <div class="col-sm-2"> <div class="jumbotron jumbotron-fluid top-space"> <div ...

htmlbootstrap-4

Understanding Aspect Ratios in CSS for Div Containers and their Components

I am crafting an HTML5 game without the use of canvas and aiming to maintain a 16:9 aspect ratio within my div. Thanks to javascript, achieving this is straightforward and it functions flawlessly. However, the elements inside the div occasionally appear to ...

javascriptcsshtml

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enoug ...

javascriptjqueryhtmlcss

I'm having trouble anchoring my images to a specific spot on the webpage in HTML

After creating my divs in css and linking them to my index file, I encountered an issue when zooming out of the page. The images would shift to the left while the background remained centered. I needed help figuring out how to keep an image fixed on the pa ...

htmlcssfixed

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

htmlcss

CSS Dilemma: Font Refusing to Change

Hey everyone, I'm new to web development and currently building a basic website on my computer. However, I'm facing an issue where the font I want to use is not changing. Both my HTML and CSS files are located in the correct folder and I am confi ...

htmlcss

Create a continuous scrolling tool similar to Google Reader for iGoogle

Do you know how to create an infinite scroll widget similar to Google Reader on iGoogle? This widget should be able to dynamically load data as the user scrolls, and replace the traditional scroll bar with a pair of up and down arrows. The HTML structure ...

javascriptcss

Is it possible to utilize the output of a function to determine the styling of a div element in Vue?

Hi, I'm trying to use the v-bind:style in my div to apply the textposit function with the textpos prop as a parameter. The function should adjust the style of the div based on the value of the parameter. <div class="container" :style=&qu ...

javascriptcssvue.jsvuex

Assistance needed in keeping an image with absolute positioning CSS fixed to the top left corner of the browser

Looking for some CSS help as a beginner here! I've been trying to position a transparent PNG image over a centered table, but it seems stuck in the upper left corner of the browser. Absolute positioning should give me freedom to move it around, right? ...

csshtmlabsolute

Enhance your Rails application by dynamically updating table cells with Ajax, eliminating the need for

In my index.html.erb file, I have set up one form and one table. Using Ajax allows me to submit the form without any redirects. <%= form_for approval, remote: true do |f| %> <%= f.check_box :pass %> <%= f.submit%> <% end %> My ...

javascriptjqueryruby-on-railsajax

Css shaky letters transformation

[SOLUTION] To resolve this issue, you can utilize the will-change CSS property that enforces GPU rendering: will-change: transform; [ORIGINAL QUESTION] After extensive searching on the internet, I have yet to find a solution to a seemingly simple prob ...

javascriptcsstransformjittertranslate3d

When I add text to div boxes, they begin to drift downward

After creating four div boxes with content, I encountered an issue. Initially, when inserting filler text, everything seemed fine. However, as soon as I started adding actual content into the first box, the other three boxes shifted downwards by the same a ...

htmlcss

I am having trouble getting the border-radius to display properly in my email table

I'm in the process of designing a responsive email template. For the white content area, I've applied border-radius: 5px;. While it's working fine on the bottom corners of the table, the top corners don't seem to display the border-rad ...

htmlcssemail

Update the styling of each div element within a designated list

Looking for a way to assist my colorblind friend, I am attempting to write a script. This is the layout of the page he is on: <div class="message-pane-wrapper candy-has-subject"> <ul class="message-pane"> <li><div style=" ...

javascripthtmlcss

How can a loop be created to run indefinitely until the user exits the webpage?

So, on my website I created a little interactive slideshow using Jquery. I would like the animations to keep looping until the user navigates away from the page. Below is the snippet of Jquery code I am using: var t2 = setTimeout(function(){ $("#wantawebs ...

jqueryloopsanimationslideshowinfinite

What are some ways to ensure keyboard accessibility for a CSS drop-down menu?

I have come across some solutions, but I am struggling to incorporate them into my code as some require elements that are not compatible with my project. Let's get to the question: I need help making an existing CSS drop-down menu accessible for key ...

htmlcssdrop-down-menuaccessibilitykeyboard-navigation

Insert between the top navigation bar and the sidebar menu

I am currently in the process of designing my very first website and I have encountered a bit of trouble. I would like to add a page between a navbar and a vertical bar, and I want this page to be displayed when a button on the vertical bar is clicked. You ...

phphtmlcss