The Bootstrap 4 Dropdown Menu is positioned on the right side of its parent element

Just started using Bootstrap and have a query regarding my Navbar design. Check out my trial website at TEST-DOMAIN

Currently utilizing Bootstrap 4.3.1 along with JQuery 3.4.1.

The menu looks perfect on Desktop view. The dropdown displays as expected. I added columns to the dropdown to create a Mega Menu of sorts.

However, when transitioning to mobile view, the dropdown appears to the RIGHT of the parent menu item. Is there a way to make it appear BELOW the parent item and push the rest of the menu down?

I attempted setting the dropdown to Display: absolute as suggested in other posts, but while it moves the dropdown to the left as desired, it overlays the rest of the menu. I want it to align left while pushing the remaining menu items below it.

Any assistance would be highly appreciated!

* EDIT - Including code *

<!--Navbar-->
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark nav-transparent sticky-top">
<div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#" style="margin-top: -5px;"><strong>Test Website</strong></a>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-center">
            <li class="nav-item active">
                <a class="nav-link" href="home.html">Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item dropdown btn-group">
                <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
                <div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-4">
                                <a class="dropdown-item" href="another-page.html">ANOTHER PAGE</a>
                                <a class="dropdown-item" href="pools.html">POOLS</a>
                                <a class="dropdown-item" href="test-10.html">TEST 10</a>
                                <a class="dropdown-item" href="test-5.html">TEST 5</a>
                            </div>
                            <div class="col-md-4">
                                <a class="dropdown-item" href="test-6.html">TEST 6</a>
                                <a class="dropdown-item" href="test-7.html">TEST 7</a>
                                <a class="dropdown-item" href="test-8.html">TEST 8</a>
                                <a class="dropdown-item" href="test-9.html">TEST 9</a>
                            </div>
                            <div class="col-md-4">
                                <a class="dropdown-item" href="yet-another-page.html">YET ANOTHER PAGE</a>
                                <a class="dropdown-item" href="awesome-page.html">AWESOME PAGE</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
            <li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
            <li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
            <li class="nav-item"><a class="nav-link" href="kitchen-vision.html">KITCHEN VISION</a></li>
            <li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a>
            </li>            
        </ul>
    </div>
</div>

To ensure accuracy, I removed all custom CSS related to the NavBar.

cssbootstrap-4

Answer №1

@media screen and (max-width: 768px) {
  .mx-auto.d-flex {
    margin: 0!important;
    justify-content: space-between;
    display: flex;
    width: 100vw;
  }
}
<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">


<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  <div class="mx-auto d-flex">
    <a class="navbar-brand" href="#">Test Website</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <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 dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Services
        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <div class="container">
              <div class="row">
                <div class="col-md-4">
                  <a class="dropdown-item" href="another-page.html">ANOTHER PAGE</a>
                  <a class="dropdown-item" href="pools.html">POOLS</a>
                  <a class="dropdown-item" href="test-10.html">TEST 10</a>
                  <a class="dropdown-item" href="test-5.html">TEST 5</a>
                </div>
                <div class="col-md-4">
                  <a class="dropdown-item" href="test-6.html">TEST 6</a>
                  <a class="dropdown-item" href="test-7.html">TEST 7</a>
                  <a class="dropdown-item" href="test-8.html">TEST 8</a>
                  <a class="dropdown-item" href="test-9.html">TEST 9</a>
                </div>
                <div class="col-md-4">
                  <a class="dropdown-item" href="yet-another-page.html">YET ANOTHER PAGE</a>
                  <a class="dropdown-item" href="awesome-page.html">AWESOME PAGE</a>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
        <li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
        <li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
        <li class="nav-item"><a class="nav-link" href="kitchen-vision.html">KITCHEN VISION</a></li>
        <li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

Update the CSS styles using jQuery

I am looking to update the content within a CSS tag using jQuery. In this instance, I need to change "My content" to "New Content". Here is the CSS code I have: a.appari:focus:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px ...

javascriptjquerycss

What could be causing the malfunction of the ::after selector in my code?

I am currently utilizing bootstrap 4 in my code and have implemented the following ::after styling for certain elements: .navbar-light .navbar-nav > li >a::after{ content: " "; height: 50px; width: 10%; background-image: linear-gradi ...

htmlcssbootstrap-4

Result box not displaying the expected JQuery UI Autocomplete results

Can someone assist me with Autocomplete? When I search for an RTO code, the result box appears but without a list (refer to Screen : 1). However, when I press the down arrow button on the keyboard, the list starts appearing one by one (as shown in Screen : ...

javascriptjquerycssjquery-uijquery-ui-autocomplete

What is the best method for creating interactive carousel indicators that will seamlessly navigate to the corresponding carousel item when pressed?

Today I completed my first carousel and ran into an issue. The next and previous buttons are working fine, so I believe my scripts are in order. Thank you in advance for taking a look. Below is the code I used: <div id="myCarousel" class="description- ...

bootstrap-4

Creating full-width bootstrap buttons within the navbar

Currently, I am utilizing bootstrap to design the navbar on my website. My goal is to have three buttons within the navbar that, when clicked, will navigate to other pages. Currently, my navbar looks like this: https://i.sstatic.net/31s1f.jpg However, th ...

htmlcssbootstrap-4navbar

What is the correct way to implement overflow-y: auto for vertical flex-items?

Check out this interactive example. Here is the HTML code: <div class="overflow"> <div class="block"> <div class="header"> This is a green header </div> <div class="content&q ...

htmlcssflexbox

Generating DOM elements at specific intervals using Jquery

I am looking to dynamically create 1 div container every x seconds, and repeat this process n times. To achieve this, I have started with the following code: $(document).ready(function() { for (var i = 0; i < 5; i++) { createEle(i); } }); f ...

javascriptjqueryhtmlcss

CSS: Adjusting font color for targeted disabled field elements

After researching various solutions, I came across a method to change the font color of all disabled fields by using the following code snippet: input[disabled=disabled] { /* your style */ color: #fff !important; } However, I have multiple disabled fie ...

htmlcssdisabled-input

How about, "Enhance your website navigation with a sleek anchor

After many attempts to implement smooth scrolling on my Bootstrap project, I have tried numerous Youtube tutorials and Google search results without any success. The latest attempt I made was following this Stack Overflow post Smooth scrolling when clickin ...

javascripthtmlcssbootstrap-4smooth-scrolling

Is it possible to hide the <dd> elements within a <dl> using knockout's custom data binding upon initialization?

I have implemented a <dl> where the <dd> can be expanded/collapsed by clicking on the corresponding <dt> using knockout's data binding. The inspiration for my solution came from a tutorial on creating custom bindings. Currently, I h ...

javascriptjquerycssknockout.jscustom-binding

What is the standard way elements are displayed within a box that is positioned absolutely?

My current setup involves setting <body> to be absolutely positioned in order to fill the entire viewport without needing to specify a height: body { width: 100%; margin: 0; padding: 0; position: absolute; top:0; right:0; bottom: ...

css

Is there a way to ensure that a child mimics the behavior of its parent when adjusting the opacity and visibility properties of both elements?

Apologies for the ambiguous title, as I am struggling to accurately convey the issue I am encountering. To clarify the problem, I have created a jsFiddle. In my current layout, all four divs have opacity: 1 and visibility: visible, while divs a and b both ...

htmlcss

What is the best way to synchronize these two bootstrap sliders?

Looking to synchronize two Bootstrap 4 carousels? Check out the image below: https://i.sstatic.net/rAC3j.png I'm struggling to display the content of both carousels simultaneously with their respective indicators and arrow icons. Can anyone assist m ...

javascriptjquerybootstrap-4carousel

This content consists of a header, footer, and middle section with an unknown height, allowing

I am attempting to create a webpage with a header and footer div of unknown height (or minimum height) and a scrollable middle content when the content increases. The challenge is to ensure that all three sections fit within the screen. I have tried the f ...

cssresponsive-designfooter

Does CSS media query "@media only screen" only work when I am resizing the window?

I recently encountered an issue with the code found on this website (the repository can be viewed on Github here): @media only screen and (max-width: 600px) { img {width: 100%; height: 100%; margin: 0; padding: 0; } a.box { width: 100%; pa ...

cssfirefox

Conditional rendering of Materialize navbar links

I am currently working with React Materialize and React Router Dom. My goal is to display navlinks only to authenticated users using conditional rendering. However, when I implement it as shown below, the navlinks are displayed vertically instead of hori ...

cssreactjsnavbarmaterialize

Expand a div without causing any displacement to surrounding elements

If you have 4 colored divs (red, yellow, green, blue), with 2 per row, and need to expand the second (yellow) without creating a gap under the red, check out this solution. The blue will be positioned underneath the expanded yellow. For a live example, vi ...

htmlcssvue.js

How to align text vertically in a cell alongside a button in another cell using Bootstrap

In my table, I have 3 columns of text and a fourth column with a button. The alignment of the text in the cells does not match the button text vertically due to the button having a vertical-align value of 'middle'. To align them properly, I curre ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

utilize the "li" element to function as a clickable button

My HTML code contains ul elements, as shown below: <ul class="nav" id="loadCategories"> <li class="sub-menu"><a href="#">Search by category</a> <ul class=""> <li><a href="#">Food</a></li> ...

htmlcssbuttonhtml-lists

What is the best way to vertically center elements within a navigation bar?

I'm currently working on a React application and I am trying to create a navigation bar. However, I am encountering some difficulties with aligning the elements in the middle of the nav bar layout. You can see the issue depicted in the image at this l ...

htmlcss