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/

https://i.sstatic.net/hHAKz.png

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

New and improved Bootstrap 5 menu bar

I am seeking to customize my navigation bar by adding a black background that spans its entire length. I do not want to rearrange the links or logo; just apply a background color. Another issue arises during SASS compilation: I am trying to change the col ...

htmlcssnavbarbootstrap-5

The text in Outlook for Windows emails is being obscured by a button that is overlapping it

As a newcomer to HTML email development, I've encountered an issue that has been puzzling me for the past few days. The problem lies in creating a two-column layout where the left column contains an image and the right column holds text along with a b ...

htmlcssemailoutlookhtml-email

Is there a solution for the continuous automatic incrementing of the jQuery UI spinner that occurs when I right-click on it?

Only Linux and Mac OS users are facing this particular issue, indicating a potential bug with the jQuery spinner. The bug also affects the spinner located at the following link: https://jqueryui.com/spinner/ <input class="spinner"/> $(".spinner"). ...

javascriptjqueryjquery-uijquery-ui-spinner

Creating a CSS binding for width: a step-by-step guide

I have a complex layout with multiple elements in different divs that need to be aligned. Hardcoding the width or using JS on page load to specify values in pixels both seem like messy solutions. How can I achieve this without causing a zigzag effect? Her ...

htmlcsstwitter-bootstrap

The hyperlink is not functioning properly because of the CSS code

I found a helpful menu on this site http://www.jqueryscript.net/menu/interactive-menu-css3-jquery.html However, I encountered an issue. When I click on <a href="1.html">Application 1</a> It doesn't redirect to 1.html as expected. The p ...

htmlcss

Create a dynamic animation effect by making a div slide on and off the screen

I'm having trouble figuring out how to make my div slide with a toggle button. I attempted to use variables, but since I have multiple instances of this, it's becoming too complicated to keep track of all the clicks on each one. $(document).r ...

javascriptjquery

What's the best way to refresh append() functionality within a modal? I'm currently working with NODE JS and AJAX and

Whenever I click the modal, the append() calls are adding HTML content. But if I try to use empty() or html(), the modal stops appearing altogether. What is the correct approach to creating this modal? function loadModalContent(id) { $('#myModal& ...

javascriptjqueryhtmlajaxnode.js

Navigating with a Stuck Navigation Bar Using BootstrapretaF

My website has a sticky navbar with a dropdown menu that allows users to jump to different sections of the page. However, I've noticed that when I navigate to a new section, the navbar covers part of the content at the top. After inspecting the navbar ...

htmlcssbootstrap-4

Customize the default tab appearance in bootstrap version 5.2

Is there a way to customize the appearance of these tabs? I'm looking to change the color to match the primary color of Bootstrap. https://i.sstatic.net/6HaUO.png instead of https://i.sstatic.net/qHUZ9.png <!DOCTYPE html> <html> & ...

htmlcssbootstrap-5

Are the navigation links at the bottom of the sidebar?

I've been experimenting with positioning three navigation links at the bottom of a sidebar I created, but I'm having trouble getting them there. Despite my attempts, I can't seem to figure out how to make it work. The background of the nav ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

What is the best way to enable flex-items to expand without changing their original size?

Using Flexbox can really enhance the design capabilities of a web designer. However, figuring out exactly how to achieve certain layouts can sometimes be tricky. For instance, consider this plunk. I want the items to expand within each row without stretchi ...

cssflexbox

triangle shape filled with a gradient that transitions between two colors

I have two triangles displayed at the bottom of my page - one on the left and one on the right. The right triangle is currently transparent but I want to add a gradient effect to it. For the triangle-bottom-right, I'd like the gradient to go from rgb ...

htmlcsscss-shapeslinear-gradients

finding the source file or code where a particular html element is being generated

In the HTML file I have, there are multiple JavaScript files added. Whenever I run the HTML file, a title tag is automatically created in my HTML file. I do not want this title tag to appear in my HTML file. How can I prevent this from happening? Or how c ...

javascripthtmlcss

In IE7, the string comparison in jQuery exhibits unique behavior

When using the following code snippet with a jQuery UI autocomplete element (#search), it works as expected in Firefox, Chrome, and other browsers, always returning true for the selected element. However, Internet Explorer 7 does not behave as expected. $ ...

javascriptjqueryinternet-explorer-7cross-browser

Positioning the Bootstrap 4 sidebar on the right side within a div container

Currently, I have incorporated a Bootstrap 4 sidebar within a div positioned on the right side. However, upon toggling it to hide the sidebar, an unwanted horizontal scroll bar appears. My goal is to toggle the sidebar without seeing the horizontal scroll ...

bootstrap-4sidebar

Utilizing Material UI's React framework for maintaining uniform grid column heights

Take a look at the image provided for context. I am facing an issue with two div elements, where one should occupy 20% of the total browser height and the other should take up 80%. Currently, I am utilizing Material UI Grid for positioning, which looks lik ...

htmlcssmaterial-uigrid

Bringing in LESS variables to Rails 3

In my assets folder, I have a global.less file where I have defined various site-wide variables. Currently, in order to use these variables in other less files, I have to add this line at the beginning of each file: @import 'global'; While thi ...

cssruby-on-rails-3asset-pipelineless

Stop vertical scrolling in a designated div container

I am dealing with a div that is overflowing, but the horizontal scroll bar is not visible. How can I prevent actual scrolling on the div when the user attempts to scroll using the mouse or arrow keys? Below is the code for this div and a snapshot <!- ...

htmlcss

Problem involving non-breaking spaces

After changing the font-family of my website from Gotham Pro to Gotham, I encountered an issue with the styling of numbers that were formatted using my currency formatter function. Strangely, when the &nbsp character is removed, everything appears to b ...

javascripthtmlcssreactjs

Changing the background color using jQuery switch case statement

I am attempting to utilize jquery to dynamically change the background image of a webpage based on different cases in a JavaScript switch statement. I have completed three steps: 1) Included this script tag in my HTML document: <script src="http://co ...

javascriptjqueryhtmlcss