The horizontal mega menu list does not support multi columns

I'm working on implementing a full-width mega menu with Bootstrap 4:

Here is the CSS code I have so far:

.menu-large {
  position: static !important;
}

.megamenu {
  padding: 20px 20px;
  width: 100%;
}

.megamenu > div > li > ul {
  padding: 0;
  margin: 0;
}

...

After adding container and row to the ul element to display 4 columns, I included col-md-3 in the row, but it doesn't seem to work properly as I see an empty container.

Below is the HTML structure I have:

<div class="fixed-top navbar navbar-light bg-light navbar-expand-md justify-content-center">
    ...
</div>

My issue is illustrated in the following image:

https://i.sstatic.net/7gmpM.png

You can view the demo here.

Any suggestions on how I can address this problem?

Answer №1

The problem arises from a container within a navbar being set to display:flex. To resolve this, ensure that your row spans the full width by adding either flex-grow-1 or w-100

.menu-large {
  position: static !important;
}

.megamenu {
  padding: 20px 20px;
  width: 100%;
}

.megamenu > div > li > ul {
  padding: 0;
  margin: 0;
}

... (CSS code continues) ...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

... (HTML code continues) ...

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

Struggling to modify CSS properties for :before and :after pseudo-elements?

My current styling looks like this: section.tipos .content > div:before { background: none repeat scroll 0 0 #DDDDDD; content: " "; height: 10px; left: 32%; position: absolute; top: -10px; width: 10px; } It's working p ...

I want to locate every child that appears after the <body> element, and extract the HTML of the element containing a specific class within it

It may sound a bit confusing at first, but essentially I have some dynamically generated HTML that resembles the following: <body> <div class="component" id="465a496s5498"> <div class="a-container"> <div class="random-div"> ...

Position two child divs side by side within a parent div

Here's what I have accomplished so far: http://jsfiddle.net/cHKF4/3/ However, I am aiming to incorporate small boxes (box1 and box2 inside late) #late { position: relative; border-style: solid; border-width: 3px; border-color: #00ff ...

Use sed to extract integers from HTML based on various criteria

Before we continue, I must confess: I realize using regex to parse HTML is generally frowned upon, but if Chuck Norris can do it, why can't I? ;) My goal is to extract specific data from this HTML page: http://pastebin.com/unAifctF based on thre ...

Running Protractor tests can be frustratingly sluggish and frequently result in timeouts

After spending most of the afternoon struggling with this test, I've tried different approaches but none seem to work. The task at hand is searching for users within the company, generating a table, and selecting the user that matches the name. Curren ...

How can data be partitioned into individual td elements in Rails after a specific number of records?

Revamped solution: I made some changes to the original answer that guided me in the right direction. Here is my updated code snippet: <table class="fixed"> <tr> ...

Utilize the <a> element as a button to submit the data form

I am looking to transfer data from a form to another PHP page without using a button within the form itself. Instead, I have placed a separate button outside of the form for submission. How can I achieve this by sending the form data to the other page? Bel ...

Issue with importing CSS in Pug-Template

Looking to develop a Website using node.js and express with Pug as the template language, incorporating Bootstrap CSS. However, encountering an issue where Pug is not importing my custom CSS but is successfully importing Bootstrap CSS. Experimented with d ...

Adjust the color of the IText element on a Fabric.JS canvas (utilizing React and typescript)

I have an input with the type=color attribute positioned outside of a Canvas. Inside the canvas, there are one or more IText objects along with other elements. My goal is to "change the color of selected text objects when the input value changes". Incorpo ...

Ways to modify the appearance of the Sign up page on Moodle

I'm a newcomer to the world of Moodle, currently using version 2.9. I've created a unique design for my Signup page using HTML5 and CSS. How do I go about integrating this custom page? While I understand how to change the default Login page by m ...

Web Audio API functions are encountering a playback issue on iOS 13.3, despite working smoothly on previous iOS versions

I have been developing an audio visualizer using the web audio API. It was functioning smoothly on PC, however, after upgrading to iOS 13.3, it no longer operates on Apple mobile devices. The root cause of this issue remains a mystery to me. The problem s ...

Modifying Link Hover Colors with CSS and PHP

One of the challenges I am facing is managing a file that contains an array of navigation links. This setup allows me to easily add new links to the navigation menu without manually updating multiple files. However, I am struggling with assigning different ...

Utilizing a single controller in multiple locations within AngularJS

I am currently working on developing an Ionic application which includes screens with lists containing checkboxes and the option to select all items. My experience with AngularJS and Ionic is fairly limited. The "Select All" functionality works as intende ...

The number input is not compatible with JavaScript/jQuery validation

While working on input field validation using javascript/jQuery code, I encountered an issue where the code worked fine with input type text but did not support input type number. Specifically, the 'number' type input did not work at all in FireF ...

The second entry is not being styled by CSS, is there an issue with the code in this section?

I am facing a challenge while trying to set the same background image for two div elements: .abc { background: url('images/autogen.png') no-repeat 0px -133px; width: 256px; height: 256px; }; .def { background: url('images/autogen.png' ...

What could be causing this JavaScript code to use 50% of the CPU and consume a significant amount of memory in the

I'm experiencing an issue with my banner rotator code. Here is the code snippet: function ban_rot() { //First preload images // counter var i = 0; // create object imageObj = new Image(); // set image list images = new A ...

Having trouble with mobile support for Wordpress blockquotes?

Welcome. I am currently utilizing blockquote on my website, and it's functioning properly on desktop computers. However, there seems to be a significant issue when viewing it on mobile devices. https://i.sstatic.net/FMzVy.png Below are my current bl ...

Utilizing Jquery to automatically scroll to a specific div on page load by setting an

I am attempting to automatically scroll to the div specified in the URL. The URL may include one of 21 different IDs such as: url.com/test#lite1 url.com/test#lite2 url.com/test#lite3 This scrolling action should happen when the page loads (so that user ...

Issue with Bootstrap dropdown not extending as expected

My issue lies with the functionality of my Bootstrap dropdown. When I scroll down, I can view the dropdown results within the designated area next to the label, however they are not expanding as expected. ...

Looking to manipulate the form submit data before it is submitted using the standard submit event and jQuery? Read on to learn how to remove, enhance, or change

Is there a way to extract data from a form like the one below? <form action="/search/search" data-remote="true" data-type="json" id="search_form" method="get"> <div class="input-group"> <span class="input-group-addon"> <i ...