Issue with Bootstrap 4 mega menu shifting position as additional items are included in the navigation bar

I came across a Bootstrap mega menu code online that works well overall, but I am facing an issue where the mega menu does not remain centered and keeps floating to the left of the screen. Here is the initial code snippet:

<nav class="navbar navbar-light bg-light navbar-expand-lg" id="myNavbar">

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
 </button>

 <a href="#" class="navbar-brand">Navbar Brand</a>
 <div class="collapse navbar-collapse" id="mainNav">
  <ul class="navbar-nav ml-auto nav-fill">
   (Menu items)
  </ul>
 </div>
</nav>

The alignment issue only occurs when there are more than 3 parent items in the menu. I require 5 parent items to be centered, but so far my attempts at finding a solution online have been unsuccessful.

cssbootstrap-4centerabsolutemegamenu

Answer №1

To handle any number of items in your top navigation, you can implement a unique strategy.

  • Place the mega menu (MM) outside the navigation
  • Initially set this MM to have display:none
  • Use a toggle class to show or hide the MM

Check out the code snippet below for reference:

$(document).ready(function() {
  $('#servicesDropdown').click(function() {
    $('.ourMegaMenu').hasClass('showMM') ? $('.ourMegaMenu').removeClass('showMM') : $('.ourMegaMenu').addClass('showMM');
  });
});
.ourMegaMenu {
  display: none;
}

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  flex-grow: 1
}

.showMM {
  display: block;
}

.flex-container .dropdown-item {
  white-space: pre-wrap;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<nav class="navbar navbar-light bg-light navbar-expand-lg" id="myNavbar">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
 </button>

  <a href="#" class="navbar-brand">Navbar Brand</a>
  <div class="collapse navbar-collapse" id="mainNav">
    <ul class="navbar-nav ml-auto nav-fill">

      <li class="nav-item px-4">
        <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item px-4 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>

      </li>
      <li class="nav-item px-4">
        <a href="#" class="nav-link">Contact</a>
      </li>
      <li class="nav-item px-4">
        <a href="#" class="nav-link">Blog</a>
      </li>
    </ul>
  </div>
</nav>
<div class="ourMegaMenu" aria-labelledby="servicesDropdown">
  <a class="dropdown-item" href="#">What we do</a>
  <a class="dropdown-item" href="#">How we fit your needs</a>
  <div class="dropdown-divider"></div>
  <div class="d-md-flex align-items-start justify-content-start flex-container">
    <div class=''>
      <div class="dropdown-header">Development</div>
      <a class="dropdown-item" href="#">Bespoke software</a>
      <a class="dropdown-item" href="#">Mobile apps</a>
      <a class="dropdown-item" href="#">Websites</a>
    </div>
    <div>
      <div class="dropdown-header">Professional Services</div>
      <a class="dropdown-item" href="#">Project rescue</a>
      <a class="dropdown-item" href="#">Source code recovery</a>
      <a class="dropdown-item" href="#">Application support &amp; maintenance</a>
    </div>
    <div>
      <div class="dropdown-header">Fixed Price Services</div>
      <a class="dropdown-item" href="#">Add cookie consent</a>
      <a class="dropdown-item" href="#">Add captcha</a>
      <a class="dropdown-item" href="#">Add core data</a>
      <a class="dropdown-item" href="#">Custom error pages</a>
      <a class="dropdown-item" href="#">Contact form creation</a>
      <a class="dropdown-item" href="#">Automated backups</a>
      <a class="dropdown-item" href="#">Image to HTML</a>
    </div>
    <div>
      <div class="dropdown-header">Fixed Price Services</div>
      <a class="dropdown-item" href="#">Add cookie consent</a>
      <a class="dropdown-item" href="#">Add captcha</a>
      <a class="dropdown-item" href="#">Add core data</a>
      <a class="dropdown-item" href="#">Custom error pages</a>
      <a class="dropdown-item" href="#">Contact form creation</a>
      <a class="dropdown-item" href="#">Automated backups</a>
      <a class="dropdown-item" href="#">Image to HTML</a>
    </div>
    <div>
      <div class="dropdown-header">Fixed Price Services</div>
      <a class="dropdown-item" href="#">Add cookie consent</a>
      <a class="dropdown-item" href="#">Add captcha</a>
      <a class="dropdown-item" href="#">Add core data</a>
      <a class="dropdown-item" href="#">Custom error pages</a>
      <a class="dropdown-item" href="#">Contact form creation</a>
      <a class="dropdown-item" href="#">Automated backups</a>
      <a class="dropdown-item" href="#">Image to HTML</a>
    </div>
  </div>
</div>

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

What is the method for customizing the background color in a .vue file using Bootstrap?

Can anyone assist me in updating the background color of a div class from grey to white? The code is within a .vue file using Bootstrap and includes an enclosed SVG file. Here's the snippet: <div class="text-left my-3 bg-white"> <button var ...

htmlcssvue.jsvisual-studio-code

How can I capture the ng-click event in AngularJS when using bootstrap-select for styled select inputs?

After selecting an option, I am facing an issue where I cannot capture the ng-click event when a user chooses a value from the drop-down menu. This is because the select option has been altered by bootstrap-select, as the default select option does not sup ...

jquerycssangularjsbootstrap-select

Tips for embedding 2 rows within a <td> element in a DataTables table

Here's a unique layout I want to achieve using the DataTables plugin. https://i.sstatic.net/YxfOk.png Notice how the address spans across 3 columns. This html code disrupts the sorting feature of DataTables and causes the table to shift. Here&apos ...

jqueryhtmlcssdatatables

Select multiple options by checking checkboxes in each row using React

Is it possible to display multiple select checkboxes with more than one per row? For example, I have four options [a, b, c, d]. How can I arrange it to have 2 options per row, totaling 2 rows instead of having 1 option per row for 4 rows? ☑a ☑b ☑c ...

javascriptcssreactjsmaterial-ui

Navigate to the anchor element within the webpage that contains adaptive images

My Bootstrap 4 page contains responsive images and anchor tags within the text. .img-fluid { max-width: 100%; height: auto; } Once I navigate to this page by clicking a link (e.g., 'mypage#section-one'), the page initially loads on the ...

javascriptbootstrap-4anchor

Tips for containing `overflow` within a flexbox container

I've organized my body space into three sections: header, content, and footer. To achieve a sticky footer effect at the bottom, I used the flex property in my layout. However, I'm struggling to add a scrollbar to my main container box. I've ...

htmlcssflexbox

The art of CSS Absolute Positioning and the Science of Body Sc

I'm trying to position an absolute div in the bottom right corner of a page. .absolute{ position: absolute; right:0; bottom: 0; } While this code works, I've noticed that when scrolling the page, the right/bottom position is relative t ...

csscss-position

Tips for expanding a CSS row to avoid gaps while utilizing the max-height property

Hey there, I'm trying to figure out how to eliminate the gap (the orange section) that appears when I set a max-height that is smaller than the space occupied by the top section. I assumed the main section would expand to fill the empty space, but it ...

htmlcssvue.js

What are the steps to create a responsive Coin Slider?

Once the slider is generated, it appears that there is no built-in method to resize it, causing issues with responsive design. Is there a way to adjust the size of the Coin Slider plugin based on the media queries in Twitter Bootstrap 3? Take a look at C ...

javascriptjquerycsstwitter-bootstrap-3responsive-design

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

I have designed a menu-header section for my website, inspired by this image. I created a fiddle to showcase it. However, I am facing an issue where the dropdown elements for "PROGRAMS" and "WORLD OF NORTHMAN" should start from the border of the header ins ...

javascriptjqueryhtmlcss

Expanding the content width of Bootstrap Nav Pills

I'm currently working with Bootstrap pills that feature two tabs. I would like to customize the width of the tab content container differently for each tab, but I'm unsure how to achieve this. The tab-content class currently sets the same width f ...

csstwitter-bootstrapbootstrap-5nav-pills

the recurring pattern of media conditions in every single column

Hello, I'm currently involved in a project where I have implemented media conditions for my columns using Sass. Here is the code snippet: // Mobile media - 320px width @mixin mobile{ @media only screen and (max-width:767px){ width: 300px; } } B ...

csssass

Creating Interactive Buttons with Dropdown Menus in Bootstrap

I am using a Bootstrap dropdown menu with various categories for users to select from. I want the 'Department' button to dynamically change to display the selected category after a user makes a selection. Below is the HTML code for the dropdown: ...

pythonhtmlcssflask

Tips for adjusting the width of a Qt tooltip

In order to display a tooltip that shows a two-line text with bold and multicolor characters, I encountered an issue where the tooltip had a maximum width constraint and the text was being cut off. I attempted to calculate the width of the text and manuall ...

c++htmlcssqttooltip

Upon selecting the checkbox, the user will be redirected to an input textbox

Can I make it so that when I check a checkbox, it automatically directs me to a textbox as if I pressed the TAB key? Is there a way to achieve this using only HTML and CSS? ...

htmlcsshttp-redirectcheckbox

Creating a seamless vertical marquee of several images that continuously scroll from bottom to top without interruption can be achieved by following these

Currently, I am seeking to design a mobile-friendly HTML page that features a border with multiple color images moving smoothly from bottom to top on both the right and left sides of the mobile screen. The transition should be seamless without any gaps o ...

javascripthtmlcss

Prevent the transfer of data from webpage

Is there a way to prevent users from copying content on a web page? I want to ensure that no text can be selected by the user. I am currently working on asp.net and would appreciate any creative ideas or solutions. ...

asp.nethtmlcss

How can I arrange columns on mobile devices without affecting the layout on desktop screens?

For my first time using Bootstrap v. 4, I am working on a footer that consists of three rows on desktop. Each row contains two columns, one with an icon and the other with text. However, I want to adjust the layout for mobile devices so that the icon appe ...

twitter-bootstrapbootstrap-4twitter-bootstrap-4

Ways to customize hover color of Bootstrap 5 Dropdown menu

I'm having trouble modifying the hover color for a dropdown menu using Bootstrap 5. I'm unsure of the correct method to achieve this. The desired outcome is as follows: However, at the moment it appears like this: Apologies for the oversight, h ...

htmlcsswebdrop-down-menubootstrap-5

Text alignment validation in jQuery

utilizing the validation capabilities of the jQuery validation plugin check out: http://jsfiddle.net/Kn3v5/205/ <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <div> <form id ...

jquerycssvalidation