Ways to position a dropdown submenu on the left-hand side in Bootstrap 4

I'm currently utilizing Bootstrap 4 with a multilevel dropdown feature as shown in the image below: https://i.sstatic.net/xgVLp.png

My goal is to shift the submenus to the left side, in the opposite direction from how they are currently displayed. Despite applying various classes such as dropdown-menu-left, pull-left, and dropleft, the submenu direction remains unchanged. I also attempted to override the dropdown-menu class without success.

.dropdown-menu {
  left: auto;
  right: 0;
}

Could anyone provide a suggestion on the correct class in Bootstrap 4 to achieve the desired effect of pulling the submenu to the left? I've tried solutions from other discussions here, but none seem to work for me. Thank you in advance.

Below is an excerpt of my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap 4 Navbar With Multilevel Dropdowns Example</title>
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/lumen/bootstrap.min.css">

    <style>
  .dropdown-submenu {
    position: relative;
  }
  
  .dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
  }
  
  .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
  }

    </style>

</head>
<body>
  <!-- Code continues... -->
</body>
</html>
htmlcsstwitter-bootstrapbootstrap-4drop-down-menu

Answer №1

The issue you are encountering is related to the conflict between the CSS properties left: 100% set on .dropdown-submenu .dropdown-menu and the .dropleft class. The left: 100% property is overriding the new class. To resolve this, simply remove the left: 100% property as shown in the example below: https://jsfiddle.net/fdm6zer9/

Answer №2

I pulled this from the original source and made some adjustments to the class styles. I hope this helps.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap 4 Navbar With Multilevel Dropdowns Example</title>
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/lumen/bootstrap.min.css">


    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7a7b8a7a7b2a5f9bda497e6f9e6e1f9e7">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


    <style>
        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu a::after {
            transform: rotate(-90deg);
            position: absolute;
            right: 6px;
            top: .8em;
        }

        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-left: .1rem;
            margin-right: .1rem;
        }

        .dropdown-submenu-left > .dropdown-menu{
            left: -100%;
            top: 0;
            margin: 0;
            padding: 0;
            right: 100%;
        }

        .first-sub-menu {
            width: 12rem;
            left: -122% !important;
        }

    </style>

</head>
<body>
<nav class="navbar navbar-expand-lg">
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Home 2</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Home 3</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Home 4</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Home 5</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown link
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li class="dropdown-submenu dropdown-submenu-left">
                        <a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                        <ul class="dropdown-menu first-sub-menu">
                            <li><a class="dropdown-item" href="#">Submenu action</a></li>
                            <li><a class="dropdown-item" href="#">Another submenu action</a></li>


                            <li class="dropdown-submenu dropdown-submenu-left">
                                <a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                                    <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu dropdown-submenu-left">
                                <a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                                    <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<script>
  $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
    }
    var $subMenu = $(this).next('.dropdown-menu');
    $subMenu.toggleClass('show');


    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass('show');
    });


    return false;
  });
</script>

</body>
</html>

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

Examples of how to specify a child class in CSS

Presented here is the following structure: <article class="media media--small 48"> <a href="#"> <img src="" class="media__img" alt=""> <i class="s s--plus"></i></a> <div class="media__body"> < ...

css

Unable to store the outcomes from [ngbTypeahead] in [resultTemplate]

I'm trying to integrate ngbTypeahead into my HTML using the code snippet below <ng-template #rt let-r="result" let-t="term"> <ngb-highlight [result]="r.FirstName" [term]="t"></ngb-highlight> </ng-template> <input name ...

htmlangulartypescriptrxjsng-bootstrap

Turn off automatic spelling correction and predictive text in a content-editable section

I'm currently working on a cross-browser application using Script#. I've incorporated a contenteditable div where users can input text. However, I am facing an issue with the auto correct/auto completion feature altering the user's text. Co ...

javascripthtmlcssscript#

Tips for transforming Javascript, CSS, and HTML elements into an engaging interactive PDF or .h5p page

I have developed a unique web application that allows users to place dots on a sitemap and link them to images. The technology stack includes Javascript, CSS, and HTML. phase1 Subscribed users are able to utilize a wide range of features which enable them ...

htmlpdf

Issues with JQuery script causing inconsistency in checking checkboxes

My code includes two functions designed to check and uncheck all checkboxes with a specific class. Initially, the functions work as expected but upon subsequent attempts to run them, the checkboxes do not function properly. Instead, the HTML code seems to ...

javascriptjqueryhtml

Icon Searchbar Feature in Ionic 2

I am currently working with Ionic2 and have integrated the ion-searchbar component into my project: https://i.sstatic.net/CqmF4.png Question Would it be possible to customize the search icon? The default icon is a magnifying glass, but I would like to r ...

javascripthtmlcssangularionic2

Can you propose a different approach to creating the "word stack" that overcomes the limitations of my current method?

I am attempting to convert a set of two radio buttons into a stack of two labels, one blue and one gray, to represent the selected radio button and the unselected one. Clicking on this stack will toggle which label is blue (and consequently which radio but ...

phpjavascriptcssoverflow

Enhance your PrimeNG p-calendar by customizing the background-color of the dates

Hello, I am currently attempting to customize the appearance of the p-calendar, but I am struggling with changing the color of the displayed dates. Can anyone provide assistance? Thank you in advance. Below is my template: <div class="p-field p-co ...

htmlcssangularprimengprimeng-calendar

What could be the reason for the inconsistent resizing behavior of this DIV container?

Upon viewing this demo, it becomes evident that there is an outer DIV containing an inner DIV on the left side with two inner SPANS. The challenge lies in positioning the two SPANS next to the DIV. If a line break (BR) is used to separate them, the width o ...

htmlcss

Determine the position of the cursor in an editable span

Is there a way to add text at the cursor position in an editable span when a button is clicked? The span contains multiple lines of text and HTML tags. [Take a look at this example on JSFiddle](http://jsfiddle.net/8txz9sjs/) ...

javascriptjqueryhtml

Compatibility of HTML5 websites with Internet Explorer

Following a tutorial on HTML5/CSS3, I meticulously followed each step to create a basic website. While the demo of the site worked perfectly in Internet Explorer 8 during the tutorial, my own version did not display correctly when viewed in IE8. I discove ...

javascripthtmlcsscross-browserhtml5shiv

The margin of a single flexbox item is not aligned properly

The flexbox I have contains several items. All of them are displaying correctly except for the last one, which is expanding to the edge of the div. View the current appearance of the flexbox As shown in the image, the last element is extending to the con ...

htmlcssflexbox

AngularJS uses double curly braces, also known as Mustache notation, to display

I'm currently working on a project where I need to display an unordered list populated from a JSON endpoint. Although I am able to fetch the dictionary correctly from the endpoint, I seem to be facing issues with mustache notation as it's renderi ...

javascripthtmlangularjsjson

angular overlapping collapsing

Currently, I am developing a chat board application where users can leave comments under each post. I am in the process of creating a button that will collapse all the comments for better visibility, especially as they continue to grow. <div id="collap ...

angularbootstrap-4

Ways to modify div content depending on the size of the screen

When the screen size becomes small, my goal is to modify the content within the row divs of the indices_container. Currently, all screen sizes display the index name, price, 1-day change, and year-to-date (YTD) change for each row. I only want to show the ...

htmlcssbootstrap-4frontend

Tips for rearranging button placements by utilizing multiple owl carousels across various webpages

I have successfully implemented two owl carousels on my Shopify website, and they are both functioning properly. However, I am facing an issue with the navigation buttons on the second page. The navigation buttons seem to be picking up a style that I had i ...

javascripthtmlcssshopifyowl-carousel

How to position the play button in the center using Material UI and Flexbox

Seeking advice on achieving a centered play button with borders in this layout. Struggling with flexbox to position the play button within the code provided. function Tasks(props) { const { classes } = props; return ( <div className={classe ...

cssflexboxmaterial-ui

The issue of why padding left is not functioning correctly in Bootstrap version 5.3.1

</head> <body> <header class="bg-info "> <div class="container"> <div class="row text-white"> <div class="col-md-6 p-3 pl-6 "> ...

javascripthtmlcssbootstrap-5bootstrap-tags-input

Why does one of the two similar javascript functions work while the other one fails to execute?

As a new Javascript learner, I am struggling to make some basic code work. I managed to successfully test a snippet that changes text color from blue to red to ensure that Javascript is functioning on the page. However, my second code attempt aims to togg ...

javascripthtmlcss

I am creating accordion-style bootstrap tables using data generated from an ng-repeat loop, all without the use of ui.bootstrap or jquery

My attempt at creating a table with rows filled using ng-repeat is not working as expected. I want a collapsible panel (accordion) to appear on click of each row, but only a single row is rendering with my current code. Here is a link to my code: var ap ...

javascripthtmlangularjs