Centralize Navigation Dropdowns in Bootstrap 4

I am currently using Bootstrap 4 to craft a navigation menu. Each navigation item features a dropdown menu that I want to display centered horizontally on the page, with the same size as the ul element. However, due to my limited experience with Bootstrap, I am struggling to achieve this desired outcome.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-light bg-primary py-0">
  <div class="container h-100">
    <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 h-100" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto mx-auto h-100">
        <li class="nav-item dropdown px-2">
          <a class="nav-link dropdown-toggle text-white" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Flat Roofing
                    </a>
          <div class="dropdown-menu border border-primary row mx-auto" aria-labelledby="flatRoofingDropdown">
            <div class="container">
              <div class="row">
                <div class="col-md-4">
                ...
                </div>
                <div class="col-md-4">
                ...
                </div>
                <div class="col-md-4">
                ...
                </div>

              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Current situation:

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

Desired outcome, centered and equal size:

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

Result from suggested solution:

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

Answer №1

Insert the following CSS below.

.dropdown {
    position: initial;
}

@media (min-width: 768px) {
  .dropdown-menu {
      width: 50rem; /* Custom styling for dropdown */
      position: absolute;
      left: 50% !important;
      transform: translateX(-50%) !important;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-light bg-primary py-0">
  <div class="container h-100">
    <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 h-100" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto mx-auto h-100">
        <li class="nav-item dropdown px-2">
          <a class="nav-link dropdown-toggle text-white" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Flat Roofing
                    </a>
          <div class="dropdown-menu border border-primary row mx-auto" aria-labelledby="flatRoofingDropdown">
            <div class="container">
              <div class="row">
                <div class="col-md-4">
                  <a class="dropdown-item text-primary" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
                  <a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
                  <!-- more dropdown items here -->
                </div>
                <div class="col-md-4">
                  <a class="dropdown-item text-primary" href="/category/green-roofing">Green Roof System</a>
                  <a class="dropdown-item" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a>
                  <!-- more dropdown items here -->
                </div>
                <div class="col-md-4">
                  <a class="dropdown-item navbar-brand text-primary h5" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
                  <a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
                  <!-- more dropdown items here -->
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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

The chosen choice is not able to be shown within the option tag

When attempting to filter options using JavaScript based on a selected item, I'm encountering issues. If the selected element contains 'CONTINUE' or 'BRACKET', it should be split into an array by space and only the first two indice ...

I'm experiencing issues with my code involving HTML, CSS, and jQuery

Recently, I started learning about jQuery and came across a tutorial on creating a sticky nav bar. However, something went wrong during the implementation and now I don't know how to fix it! In my Script file, I have written code that should run on l ...

Ways to create an angularJS $watch function that is able to recognize modifications in styling

I have a rich text box equipped with all the necessary style controls. If I input new text, it saves without any issue. Whenever I modify the content (text) and add styles like color highlighting or bold formatting, the changes are saved successfully. H ...

Is it possible to bind HTML within an AngularJS partial but encountering an inexplicable issue?

I'm facing an issue with my ng-repeat that involves using a partial HTML file to loop through and display items on a page. The variables within the partial are not displaying, but interestingly enough, the variable {{rule.name}} outside of the partial ...

Display loader while waiting for file to be loaded

I am utilizing ajax to retrieve a file. The loading animation is functioning properly with the ajax request, however, the file size is notably large. I am interested in implementing a preloader that will display until the file has finished loading. ...

Schema-based validation by Joi is recommended for this scenario

How can we apply Joi validation to the schema shown below? What is the process for validating nested objects and arrays in this context? const user = { address: { contactName: 'Sunny', detailAddress: { line1: & ...

Customize dropdown item colors in React using a color picker

I am currently utilizing a react color picker to create a personalized 16 color gradient. The process involves selecting a color from a dropdown menu and then using the color picker to make adjustments. This action updates an array that dictates the stylin ...

"Troubleshooting: Ajax File Uploader Plugin Not Functioning Properly

Today, our web site's file upload feature using the javascript plugin Simple-ajax-uploader suddenly stopped functioning (09/05/2019). The upload div/button is unresponsive when clicked. This issue is not limited to our site; even the official plugin ...

Create a custom shader material to display a video with THREE

As I embark on loading a video onto an animated WebGL plane with a custom shader material, my approach involves using a pre-loaded video to draw an image onto a canvas and then passing it to my shader uniforms in the render loop: // Render loop useFrame(( ...

Sending client-side data from app.js to specific components using NextJS

When working with traditional React, it's common practice to define the Routers at the entry point and pass the necessary props to specific components as needed. This allows for easy access to props since all components are clearly defined. For examp ...

Switching the default z-index for child elements within an HTML container

According to the specification, elements are typically drawn "in tree order" for in-flow, non-positioned elements of similar block level or float status and identical z-index. This means that elements declared last in the HTML markup appear on top. But wha ...

When an Ajax call is made, my .html page transforms into a .php page using jQuery

The Issue While using my PHP function to send emails, everything goes smoothly. However, I'm facing an issue where I don't want the page to refresh, so I've implemented AJAX in the code below: reservation.html <form class="form-horizon ...

Exploring the power of Partial Views in ASP.NET MVC 4 with Ajax.ActionLink

On my homepage, I am attempting to incorporate links that will render partial views - revealing information from the database when clicked. I want the link to be replaced by text on the same page. Despite following a tutorial, I am facing challenges in get ...

Leveraging the Scroll feature in Bootstrap for smooth scrolling

Seeking assistance with implementing scroll in Bootstrap 5 on my child component (ProductList.vue). Can anyone guide me on how to integrate the code? I have been searching for a solution without success. Below is the Bootstrap 5 code on the child component ...

Minimal Space Separating Footer Division and Body Element

While there are numerous discussions online about fixing footer alignment issues, I've encountered a unique problem that needs addressing. The issue at hand is a 29px gap between the bottom of the footer and the <body> tag on my webpage, which ...

Can someone explain the variance between these two script codes? Are they entirely distinct, or can I utilize just one source?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> It appears that one script is for jQuery and the ...

Currently experimenting with jQuery in conjunction with the reddit API to generate individual divs for every post

Issue with displaying post titles, URLs, and permalinks separately. Need them to display together for each post. See the code below: $(document).ready(function() { $.getJSON( "http://www.reddit.com/r/pics.json?jsonp=?", function foo(data) { ...

CSS shapes are extending beyond the boundaries of their parent container

I'm working on a small webpage and I am trying to incorporate 2 shapes in the background (see design screenshot attached). Using CSS, I created these shapes but I am facing an issue where the bottom right shape keeps extending beyond the container, ca ...

Vanilla JavaScript Troubleshooting: Top Scroll Button Issue

Attempting to develop a Scroll To Top Button utilizing Vanilla JS, encountering errors in the dev console. Existing jQuery code that needs conversion to vanilla js Uncaught TypeError: Cannot read property 'addEventListener' of null My Vanilla ...

Tips for setting HTML content in a text field using SOAP API in Tuleap

We are using the Tracker SOAP API to create fresh tracker artifacts. While making changes to an artifact in Tuleap, there is an option to choose between plain text and html in a dropdown menu for a text field. Our goal is to input html-formatted text into ...