Positioning Bootstrap 4 Dropdown Menus

I am currently utilizing Bootstrap 4 and I am facing a situation where I need to create a website header containing dropdown categories.

Here is how it appears in normal view: https://i.sstatic.net/N90KR.png

And here is how it looks when hovering/clicking on the dropdown: https://i.sstatic.net/UMz3D.png

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

Here is the HTML code for the website header:

<div id="dropdown-categories"class="container-fluid">
            <ul class="list-inline d-flex justify-content-center">
                <li class="list-inline-item dropdown">
                    <a class="categories-item dropdown-toggle" href="#" id="Hardware" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
                    Hardware
                    </a>
                    <div class="dropdown-menu" aria-labelledby="Hardware">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="multi-column-dropdown">
                                    <p class="dropdown-item dropdown-head">Plumbing</p>

                                    <a class="dropdown-item" href="decorer.php">Pipes</a>

                                    <a class="dropdown-item" href="dholwale.php">Hoses<a>

                                    <a class="dropdown-item" href="dholwale.php">Water Taps</a>

                                    <a class="dropdown-item" href="dholwale.php">Shower Heads</a>

                                    <a class="dropdown-item" href="dholwale.php">Drain Cleaners</a>

                                    <a class="dropdown-item" href="dholwale.php">Accessories</a>

                                </div>
                            </div>

                            <div class="col-md-3">
                            <ul class="multi-column-dropdown">
                               <p class="dropdown-item dropdown-head">Power & Hand Tools</p>

                               <a class="dropdown-item" href="decorer.php">Drills</a>

                               <a class="dropdown-item" href="dholwale.php">Measuring Tape</a>

                               <a class="dropdown-item" href="dholwale.php">Screwdrivers</a>

                               <a class="dropdown-item" href="dholwale.php">Hammers</a>

                               <a class="dropdown-item" href="dholwale.php">Spanners</a>

                               <a class="dropdown-item" href="dholwale.php">Ladders</a>

                               <a class="dropdown-item" href="dholwale.php">Trolleys</a>

                               <a class="dropdown-item" href="dholwale.php">Tools</a>

                               <a class="dropdown-item" href="dholwale.php">Saws</a>

                               <a class="dropdown-item" href="dholwale.php">Cutters</a>

                               <a class="dropdown-item" href="dholwale.php">Tool Boxes</a>

                               <a class="dropdown-item" href="dholwale.php">Tape</a>

                               <a class="dropdown-item" href="dholwale.php">Accessories</a>

                            </ul>
                            </div>

                        </div>

                    </div>
                </li>

                <li class="list-inline-item dropdown">
                    <a class="categories-item dropdown-toggle" href="#" id="Electrical" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
                        Electrical
                    </a>
                    <div class="dropdown-menu" aria-labelledby="Electrical">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="multi-column-dropdown">
                                    <p class="dropdown-item dropdown-head">Power & Hand Tools</p>

                                    <a class="dropdown-item" href="decorer.php">Drills</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>

                <li class="list-inline-item dropdown">
                    <a class="categories-item dropdown-toggle" href="#" id="Household" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
                        Household
                    </a>
                    <div class="dropdown-menu" aria-labelledby="Household">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="multi-column-dropdown">
                                    <p class="dropdown-item dropdown-head">Housekeeping </p>

                                    <a class="dropdown-item" href="decorer.php">Garbage Bag</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

CSS

/*items dropdown start */
#dropdown-categories{
    background-color: #444;
}

.list-inline-item{
    padding: 15px 10px;
    font-size: 15px;
}

.categories-item{
    color:white;
}

.categories-item:hover{
    text-decoration: none;
    color:white;
} 
 .dropdown-menu {
   margin-top: 0;
   width:1000px;
   height:450px;
 }

 .dropdown-item{
     font-size: 14px;
 }

  .dropdown:hover .dropdown-menu { 
    display: block; 
} 
/*items dropdown end */

The current issue with the dropdown menu position is a bit awkward. I aim to have all dropdown menus centered on the page, with consistent width and height similar to this design: https://i.sstatic.net/RcRjV.png https://i.sstatic.net/S2GzN.png

htmlcssbootstrap-4

Answer №1

Eliminate the dimensions specified in the class .dropdown-menu and refrain from using fixed width and height measurements

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

Creating a text input that spans the full width of the form in a Bootstrap

I'm having trouble creating a text box that spans the entire width of my container. <div class="row"> <div class="col-md-12"> <form class="form-inline" role="form"> <input type="text" class= ...

htmlcsstwitter-bootstrap-3

Looking to align a radio button in the middle of an inline-block?

Is it possible to center a radio button within an inline-block? I have provided a demo on JSFiddle that displays the current layout and how I envision it should appear. Check out the demo here Here is the code snippet in question: <span style="widt ...

htmlcss

Adjust for the region shifted using transform: translate

I'm currently working on adjusting the positioning of elements using transform: translateY in CSS. The challenge I am facing is eliminating the empty space that appears between elements after repositioning one element below another without altering th ...

htmlcsscss-transforms

Using BeautifulSoup to extract a specific tag from a webpage

I am working with HTML code <div class="b-media-cont b-media-cont_relative" data-triggers-container="true"><span class="label">Engine:</span> petrol, 1.6 L<br/> <div class="b-triggers b-triggers_theme_dashed-buttons b-triggers_s ...

pythonhtmlbeautifulsoup

Troubleshooting Bootstrap 4 carousel malfunction in a Laravel 5.8 application

I am currently working on a Laravel project (v5.8) and using the default Bootstrap 4 that comes with it as my frontend CSS framework. Everything is functioning perfectly except for the carousel, which seems to be causing some issues. I suspect that the pro ...

bootstrap-4laravel-5.8

Stop the body from scrolling when the side panel is opened

Whenever I click on my button with the class "cd-btn," it triggers the toggling of my panel with the class "cd-panel.is-visible." jQuery(document).ready(function($){ //open the lateral panel $('.cd-btn').on('click', function(event){ ...

jqueryhtmlcsspanel

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

My React application includes a dynamic menu component created with Material-UI (@mui) that supports nested menus and submenus. I'm aiming to achieve a specific behavior where users can access other menus (such as parent menus) while keeping a submenu ...

javascripthtmlcssreactjsmaterial-ui

What is the most efficient way to choose the correct value from an HTML drop-down list based on the name and ID that is provided?

Is there a way to automatically select the value in a drop-down list from HTML based on the name and ID I receive? I need this functionality to edit information from the database. I've tried using this code but it's not displaying the correct op ...

htmltwitter-bootstrap

What are some ways I can ensure that my personalized bootstrap navbar adjusts to different viewport sizes?

I've created a custom navbar that fits perfectly on a screen that is 1300 pixels wide by 700 pixels high. https://i.sstatic.net/nOm0c.png However, when the viewport size is reduced, the navbar elements become misaligned: https://i.sstatic.net/zBqpQ ...

htmlcssbootstrap-4

Including an embedded iframe in an asp.net web form

I need to integrate an iframe into a web form by retrieving the URL from an API call to a third-party payment service. I am working with ASP.NET 4.5 and C# 6.0. The code for my web form includes implementing an iframe similar to that in an ASP.NET MVC cod ...

c#htmlasp.netiframewebforms

Guide to importing scoped styles into a <NextJS> component

When importing a CSS file, I usually do it like this: import './Login.module.css'; In my component located at components/login/index.js, I define elements with classes such as <div className="authentication-wrapper authentication-basic ...

javascriptcssnext.js

Issue with embedding icon within input field in Bootstrap version 4.1

I am currently implementing a project using Angular 6 along with the latest version of Bootstrap v4.1. I am attempting to create a reactive form with icons within input fields. As there is no direct way in bootstrap to place icons on the left side of input ...

htmlcsstwitter-bootstrapbootstrap-4angular-reactive-forms

What is the rationale behind the preset margin on the <body> tag?

Throughout my years in development, I have primarily focused on front-end web UI development. One recurring issue that has always irked me is the constant need to reset default browser styling assumptions, which often slips my mind until it starts affectin ...

htmlcss

Ways to eliminate the vertical scroll feature in a kendo chart

I am encountering an issue while loading a kendo chart inside grid-stack.js where I am unable to resize the height properly. Whenever I decrease the height, a vertical scroll appears which should not happen. I have tried setting the height to auto and refr ...

javascriptjquerycsskendo-chartgridstack

Issue: Keeping the mat-form-field element in a single line

I am facing an issue with incorporating multiple filters for each column in an angular material table. I cannot figure out why the filter input is not moving to a new line under the header. Here is an image for reference -> Angular material table with m ...

htmlcssangularangular-material

Make Fomantic-UI (Angular-JS) sidebar scroll independently

Is there a way to make a sidebar scroll independently of the content it pushes? Currently, my page is structured like this: -------------------------- |[button] Header | -------------------------- |S | Main content | |i | ...

javascripthtmlcssangularjsfomantic-ui

What is the reason behind Drupal 8 appending a GET variable to the end of each CSS file and resulting in a 404 error?

I've been struggling for hours trying to figure out why the CSS is not loading on the Drupal 8 site I'm migrating. Despite successfully resolving other issues, the CSS files are throwing a 404 error, specifically due to a GET variable (?oe62rp) a ...

phpcssdrupaldrupal-8

- Customizing the width of each dropdown level in a unique way

Working on a customized menu design that you can view live at: Focusing on the third level menu, I encountered an issue where all menus have the same width due to sharing the dropdown-menu class. While I understand the root cause of the problem, I am unsu ...

jqueryhtmlcsstwitter-bootstrap-3dotnetnuke

The button will remain inactive until a selection is made from the drop-down menu, following Material

Is there a way to use Material Design css and jquery to disable the next button until a value is selected from a drop down list? <div class="mdl-selectfield mdl-js-selectfield"> <select class="mdl-selectfield__select" id="ad_duration"> ...

jqueryhtmlcssmaterial-design

What is the best way to show HTML code from an HTML file in a Vue template?

I need help showcasing the HTML code from an external file in a Vue component template. <template> <div class="content"> <pre> <code> {{fetchCode('./code/code.html')}} & ...

javascripthtmlvue.jsfilereader