Position the sub menus of Bootstrap 4.5 to align with the parent menu on the left side

I'm attempting to position sub-menus underneath all parent menus and align them with the left parent menu.

Important: I want the submenus to be aligned under the paint menu, not directly below the parent menu.

Despite using position absolute and transform in my code (CSS/HTML) as shown below, I am unable to achieve the desired result:

<!doctype html>
<html lang="en">
   <head>
      <title>Title</title>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <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">
      <style>
         @media (min-width: 768px) {
           /* Your CSS styles go here */
         }
      </style>
   </head>
   <body>
      <nav class="navbar navbar-light navbar-expand-md navigation-clean">
         <div class="container">
            <!-- Navigation menu structure goes here -->
         </div>
      </nav>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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>
   </body>
</html>

The issue I am facing is illustrated in the attached image. All submenus should align properly with the paint parent menu.

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

Any assistance in resolving this issue would be greatly appreciated.

Answer №1

Check out this new working Gif link: https://i.sstatic.net/OTbHh.gif

Here is the updated link you requested: https://jsfiddle.net/h4ynogLe/

<!doctype html>
<html lang="en">
   <head>
      <title>Title</title>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <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">
      <style>
         @media (min-width: 768px) {
           .nav li {
             display: block;
             transition-duration: 0.5s;
           }
         }
         @media (min-width: 768px) {
           li:hover {
             background: #ffffff;
             cursor: pointer;
           }
         }
         @media (min-width: 768px) {
           ul.nav li ul.multi-column {
             visibility: hidden;
             opacity: 0;
             position: absolute;
             transition: all 0.5s ease;
             margin-top: 1.1rem;
             left: 0;
             display: none;
           }
         }
         @media (min-width: 768px) {
           ul.nav li:hover > ul.multi-column, ul li ul:hover {
             visibility: visible;
             opacity: 1;
             display: block;
           }
         }
         @media (min-width: 768px) {
           ul.nav li ul.multi-column li {
             clear: both;
             width: 100%;
           }
         }
         @media (min-width: 768px) {
           .multi-column {
             border: 1px solid black;
             border-top: 0;
             background-color: #ffffff!important;
             margin-top: 0!important;
             width: 500px;
           }
         }
         @media (min-width: 768px) {
           .multi-column-dropdown {
             /*margin: 0;*/
             padding: 0 0 0 5px;
           }
         }
         .dropdown-menu-centre {
           right: auto!important;
           left: auto!important;
           /*-webkit-transform: translate(0, 0);*/
           /*transform: translate(0, 0);*/
           background-color: green!important;
         }
      </style>
   </head>
   <body>
      <nav class="navbar navbar-light navbar-expand-md navigation-clean">
         <div class="container">
            <button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
               <ul class="nav navbar-nav mx-auto">
                  <li class="nav-item dropdown" role="presentation">
                     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Paints</a>    
                     <ul class="dropdown-menu multi-column dropdown-menu-centre ml-4">
                        <div class="row" role="menu">
                           <div class="col-sm-4">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Bristle Paint Brushes
                                 </li>
                                 <li>
                                    Paints Link two
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-4">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Anti Condensation Paint
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-4">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Paints Link one
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </ul>
                  </li>
                   // Additional list items have been removed for brevity 
               </ul>
            </div>
         </div>
      </nav>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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>
   </body>
</html>

Explanation: I made some adjustments to margins and removed a transform class based on your request.

Answer №2

Appreciate your response, I attempted to implement your solution but unfortunately, it did not work as expected, as illustrated in the image below.

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

Fortunately, I was able to achieve the desired outcome yesterday using jQuery. Below is the code snippet I utilized:

$(".nav-link").on("mouseover",function(){
        var leftAlign = $("#main-div").offset();
    var i;
        
        for(i = 1; i < 7; i++)
            {
    $(".sub-container-" + i).css("position", "fixed");
    $(".sub-container-" + i).css("left", + Math.floor(leftAlign.left) +"px" );
    $(".sub-container-" + i).css("width", "600px");
            }

CSS rules applied for top alignment:

@media (min-width: 768px) {
  .sub-container-top {
    position: absolute;
    top: 362px;
  }
}

@media (min-width: 992px) {
  .sub-container-top {
    position: absolute;
    top: 262px;
  }
}

The implementation I used successfully achieved the desired effect

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

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 causing the section to cover the navbar?

My content is overlapping the navbar on certain screen sizes, and I'm not sure why. Any ideas on how to fix this issue? Would wrapping everything in a container help? Currently using bootstrap v5.3.0-alpha1. Additionally, when I have a collapsed nav ...

When the canvas is in full screen mode, my div elements are hidden

Currently, I am immersed in a 360-panorama project, utilizing panolens.js and three.js. While Panolens offers fullscreen mode functionality, the problem arises when entering this mode as the canvas conceals all of my div elements. One particular div elemen ...

The fixed width setting for the alpha table column is not being recognized

Despite my efforts, the responsive bootstrap 4 table is not adhering to my fixed column width styles. <table class="table table-responsive table-sm table-striped table-hover"> <thead> <tr> <th> <input typ ...

Unleashing the Power of Tailwind CSS: Enabling Group Hover Effects on Anchor Tags

When I run my code on play.tailwindcss.com, the group hover feature works fine. However, when I copy the same code into my local file, the group hover doesn't work there. What do I need to add to my tailwind.config.css file in order to enable group ...

Eliminate the navigation bar background using MaterializeCSS

I want to create a unique extended navigation bar for my website that has the following structure: <nav class="nav-extended"> <div class="nav-wrapper"> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a ...

The background image in Internet Explorer's <td> element will only be visible where there is existing content

Greetings to all, this is my first time asking a question here. I am currently facing an issue with a cell's background image. Interestingly, it displays perfectly in Chrome and Firefox, but the problem arises when using Internet Explorer. In IE, th ...

When trying to make edits, the cursor automatically jumps to the end of the field

In Safari, there is a strange issue occurring with a text field used for emails. When entering text and trying to edit by moving the cursor, new characters are automatically placed at the end of the text. It seems that the problematic code causing this beh ...

The Angular ngFor loop seems to be stuck in an endless cycle while trying to display

I'm currently in the process of creating a Logbox for my web application. It is designed to receive an Array of logs and display them row by row within a div. I am utilizing ngFor to iterate through my Array of logs and then present them. However, I& ...

Hover effect affecting adjacent divs on left and right sides

My navigation bar, known as .navbar, consists of 7 direct child elements called navbar-item. Currently, I have implemented a hover effect where the width and height of a navbar item increase by 20px upon hovering. However, my goal is to enhance this inter ...

The header tag will not align to the left with the content when placed next to a left-floating div

I have a challenge where I am attempting to insert content to the right of an unordered list while ensuring it stays aligned to the left of the list (which is floated to the left). Interestingly, when I add paragraphs and images, the alignment works perfec ...

Is it possible to choose a concealed HTML radio button by using a designated label?

Attempting to work on a unique project here, creating an HTML calendar that allows users to select a day and submit the form without relying on javascript. Below is a snippet of the HTML code: <body> <form action="/Controller/Select" method=" ...

Obtaining data from console.log and showcasing it within a div element

Currently, I am facing a challenge where I want to retrieve the title, plot, and poster using the themoviedb API. However, I am lost on how to begin coding this. Whenever I perform a search, the information is displayed in the console log of the browser. ...

Displaying text and concealing image when hovering over a column in an angular2 table

I am currently using a table to showcase a series of items for my data. Each data entry includes an action column with images. I would like to implement a feature where hovering over an image hides the image and reveals text, and vice versa (showing the im ...

Aligning content in the center vertically of a container

My attempt to vertically center some h2 text within a div using display:table-cell along with vertical-align: middle is not successful. The issue seems to be arising because the div I want to center the content in is nested inside another div. Below are ...

Link to toggle a CSS spoiler button

Currently, I have Ajax set up to replace the main div with a link. In addition, there's a spoiler-type navigation that allows you to hide or show the menu. I have my links inserted in this structure and am trying to figure out how to make it so that c ...

What is the method for applying a style/class to an HTML element within MVC?

Within the Master page layout, I have the following structure.... <ul id="productList"> <li id="product_a" class="active"> <a href="">Product A</a> </li> <li id="product_b"> <a href="">Product B</ ...

Safari not rendering SVG wave at full width reached

My SVG isn't scaling to 100% width in Safari like it is in IE, Chrome, and Firefox. Despite numerous attempts, I haven't been able to make my SVG stretch across the full width like it does in other browsers. The project is built using React. . ...

Tips for aligning text in the center of a button across various screen sizes using bootstrap4 or CSS

I am facing an issue with the alignment of button text. It appears to be off-center on certain screen sizes, as shown in the images below. On my iPad, it looks fine: https://i.sstatic.net/agDR3.png However, on my iPhone, the positioning is not centered: ...

What is the best way to create a @mixin incorporating variables to easily reference breakpoints using custom aliases?

Currently in the process of constructing a website using SASS coding, I have created several @mixins for Media Queries that will be utilized later with the @include directive. The structure of these mixins is as follows: _standards.sass // Media queries @ ...

Mastering @media queries to dynamically alter widths in prop styled components

I have a unique component that utilizes an object with its props for styling. const CustomSection = ({ sectionDescription, }) => { return ( <Text {...sectionDescription} content={intl.formatMessage({ id: &apos ...