Issue with displaying third level child menu on the left side in Bootstrap 4

I have integrated a Bootstrap 4 theme into my Wordpress website, which you can find at this link: . The challenge I am facing is with the Bootstrap 4 navbar and third-level child menus, as they are not natively supported by Bootstrap 4. To address this issue, I have applied custom CSS to my Bootstrap 4 setup.

You can view the custom CSS code that I used in my implementation here: 

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top:-6px;
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
}

Currently, I am facing an issue where the child menus appear below each parent menu item:

https://i.sstatic.net/tyPio.jpg

In the image above, "Exact" should actually be displayed to the right of the parent menu (similar to the codeply example). Can someone guide me on what modifications I need to make to achieve the correct layout? I have been struggling with this for a week now.

Thank you!

grid

csswordpressbootstrap-4menu

Answer №1

Give this code a shot.

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top:-6px;
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <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 </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"><a class="dropdown-item dropdown-toggle" href="http://google.com">Google</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Submenu</a></li>
                            <li><a class="dropdown-item" href="#">Submenu0</a></li>
                            <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
                                    <li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
                                    <li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Answer №2

After implementing Bhautik's solution, I meticulously tested each line of code and determined that the suggested CSS snippet resolved the issue:

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

Many thanks,

Wishing you a wonderful day.

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

Choosing from a list in Angular

I'm trying to make a dropdown menu that shows options in the format "code-description", but only displays the "code" portion when an option is selected. For example, showing "A-Apple" in the dropdown, but displaying only "A" when chosen. I am able to ...

javascripthtmlcssangulartypescript

Trigger a modal from one sibling Angular component to another

My application utilizes an Angular6 component architecture with the following components: <app-navbar></app-navbar> <app-dashboard></app-dashboard> The Dashboard component consists of: <app-meseros> </app-meseros> < ...

javascriptangularservicebootstrap-4angular6

How to efficiently structure CSS columns using Div elements within a Bootstrap card

<!-- New Blog Post --> <div class="card mb-4"> <img class="card-img-top" src="https://ichef.bbci.co.uk/news/660/cpsprodpb/948D/production/_109592083_mediaitem109591445.jpg" alt="Card image cap"> ...

htmlcssbootstrap-4

Is applying a bevel effect when hovering achievable?

Is there a way to add a bevel effect to my hyperlink image so it stays in place without moving down? I need the bevel effect to be inside the image as it keeps shifting position. Any suggestions would be greatly appreciated. I really need the bevel effect ...

htmlcssalignmentbevelled

The alignment of unordered lists can be modified

Having a bit of an issue with positioning/resizing UL lists. I have <li> tags with varying heights but the same width. I want to adjust their position so there is no blank space between them when resizing the window, ensuring they are always close t ...

javascriptjqueryhtmlcss

The Bootstrap Library reference causes the anchor hover function to malfunction

Feeling frustrated after encountering an issue where the Bootstrap button class interferes with the hover function in standard CSS. Decided to create a custom solution by adding a grey box next to the button to display hover information instead of using t ...

htmlcsstwitter-bootstrap

Three dots implemented in the heading of a card

In my Bootstrap 4 project, I am aiming to design a card header with three distinct parts. The left part will showcase the author. The middle section will present a preview of the content. The right part will display the date. Specifically, I want the mid ...

htmlcsstwitter-bootstrapbootstrap-4

The functionality of CSS hover effects is blocked by Jquery

In my latest project, I have created a unique menu feature where the color of the field changes when hovering over it. I then used jQuery to dynamically change the CSS onclick. However, I encountered an issue where the hover effect stopped working after t ...

jquerycsshover

Issue with spacing dropdown choices within primary navigation bar

Struggling with my final project for a class as the semester comes to a close. I've received minimal help from my Professor and hit a roadblock. The main navigation on the side is working correctly, but the dropdown options are stacking on top of each ...

htmlcss

Struggling to make addClass and removeClass function correctly for the development of the unique "15 puzzle" game

I am currently in the process of creating a version of "the 15 game" using jQuery in HTML. You can find more information about the game on this page. The objective of the game is to rearrange a table of "boxes" in ascending order from 1 to 15. Below is th ...

javascriptjqueryhtmlcss

Creating a compact Swiper slider: reducing image size without sacrificing full window coverage!

Utilizing Swiper to craft a slider that occupies the entire window, with a slight margin for a bar-- no issues there. (https://i.sstatic.net/qcGBA.jpg) However, the image I placed in for the slide () appears to be excessively enlarged. Is there a way to ...

javascripthtmlcsssliderswiper.js

Creating a responsive Google map within a div element: A step-by-step guide

I am experiencing difficulties with implementing a responsive Google map on my webpage. To achieve a mobile-first and responsive design, I am utilizing Google Map API v3 along with Bootstrap 3 CSS. My objective is to obtain user addresses either through th ...

javascripthtmlcssgoogle-maps

What is the best way to position the arrow next to the header of a sorted table?

I've been working with a table and wanted to enable sorting on all table headers, so I decided to refer to the bootstrap example for guidance. The issue I encountered in this example is that the arrow indicating sort direction appears on the left sid ...

angularbootstrap-4angular-materialbootstrap-5angular-ui-bootstrap

Configuration for secondary dependencies in Tailwind

As per the guidelines outlined in the official documentation, it is recommended to configure Tailwind to scan reusable components for class names when using them across multiple projects: If you’ve created your own set of components styled with Tailwin ...

javascriptcssnode.jstailwind-css

Adjust the position of the remaining li elements to accommodate the increased height of a single li element

I am currently working on a dropdown menu and I'm encountering an issue where, in the second level of <ul>, if the height of an <li> increases due to accommodating another <ul>, the other <li> elements in the second level do no ...

htmlcss

Expanding a responsive HTML background image using Javascript

I've spent countless hours grappling with this code, attempting to dynamically resize the background of HTML based on the browser window size using JavaScript. Here's what I have so far (I'm using Firefox for this): GM_addStyle('body ...

javascripthtmlcssfirefoxgreasemonkey

Achieving a consistent fixed width for tbody even when scrollbar is present

thead{ width: calc(100% - 17px); display:block; } tbody{ display:block; overflow-y: auto; height:100px; } http://jsfiddle.net/mkgBx/ Is there a way to adjust the width of the tbody element to match that of the thead element plus the scrollbar? Currently ...

htmlcss

Toggle the class to slide in or out of the div

I am attempting to create a header with two positions - one absolute and one fixed. I want the header to smoothly slide in as you scroll down, and then slide out when you scroll back to the top. However, I am having trouble getting it to slide; instead, it ...

jqueryhtmlcss

Splitting a CSS hierarchical list into horizontally aligned levels of hierarchy

I am trying to horizontally lay out an ordered list with multiple top level nodes while preserving the vertical layout of child nodes. For example, consider a basic list structure like this: <ol> <li>Top 1 <li>Sub 1</li ...

htmlcss

bootstrap navigation bar collapsible menu

Struggling with making the hamburger menu appear on my friend's site. Spent hours trying to troubleshoot, but still can't figure out why it's only showing up as a red box and appearing on larger screens instead of just smaller devices. Frust ...

javascripthtmlcss