Guide to aligning MEGA MENU with navbar

I've implemented a navbar that includes dropdown nav-items with a mega menu.

The mega menu is set to position:absolute.

Is there a way to dynamically align the mega menu in the center of the page while using the same component for all nav-items?

Check out the Code Sandbox demo

.dropdown-menu {
  position: absolute;
  width: 400px;
  height: 300px;
}

.nav-item {
  margin-left: 60px;
}

.list-1 {
  position: absolute;
  left: 0px;
}

.list-2 {
  position: absolute;
  left: 100px;
}

.list-3 {
  position: absolute;
  left: 200px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671309110917">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<ul class="nav nav-pills ">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <ul class="list-1">
        <li class="option-1">option 1</li>
        <li class="option-2">option 2</li>
      </ul>

      <ul class="list-2">
        <li>option 3</li>
        <li>option 4</li>
      </ul>

      <ul class="list-3">
        <li>option 5</li>
        <li>option 6</li>
      </ul>
    </div>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a
        >
        <div class="dropdown-menu">
          <ul class="list-1">
            <li class="option-1">option 1</li>
            <li class="option-2">option 2</li>
          </ul>

          <ul class="list-2">
            <li>option 3</li>
            <li>option 4</li>
          </ul>

          <ul class="list-3">
            <li>option 5</li>
            <li>option 6</li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a
          class="nav-link dropdown-toggle"
          data-toggle="dropdown"
          href="#"
          role="button"
          aria-haspopup="true"
          aria-expanded="false"
          >Dropdown</a
        >
        <div class="dropdown-menu">
          <ul class="list-1">
            <li class="option-1">option 1</li>
            <li class="option-2">option 2</li>
          </ul>

          <ul class="list-2">
            <li>option 3</li>
            <li>option 4</li>
          </ul>

          <ul class="list-3">
            <li>option 5</li>
            <li>option 6</li>
          </ul>
        </div>
      </li>
    </ul>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482a27273c3b3c3a2938087c667e6678">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

htmlcssbootstrap-4sassmegamenu

Answer №1

Based on my interpretation of your inquiry, it seems you are looking to perfectly align the mega menu in the middle of the screen. This can be done by using margin: auto. Sharing the CSS code you are working with could assist us in providing a more tailored solution for your specific situation

Answer №2

In order to align the megamenu at the center while being positioned absolutely,

This CSS code should be applied to achieve the desired centering effect:

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Answer №3

Absolutely-positioned elements are placed in relation to their closest non-static ancestor, requiring us to set the list items containing them as static. This shifts the positioning context to whatever is positioned non-statically outside of the list. In this example, it refers to the body element.

Next, we must forcefully override certain position and translation styles. An important note is that the value for `top` is hardcoded and may need adjustments based on the positioning context, potentially not being ideal for all responsive scenarios.

One additional piece of advice: It's generally not recommended to have interior lists set as absolutely positioned. This can lead to complications and is often unnecessary. Consider using flexbox as an alternative approach.

.dropdown-menu {
  position: absolute;
  width: 400px;
  height: 300px;
}

.nav-item {
  margin-left: 60px;
}

.list-1 {
  position: absolute;
  left: 0px;
}

.list-2 {
  position: absolute;
  left: 100px;
}

.list-3 {
  position: absolute;
  left: 200px;
}

.mega li {
  position: static;
}

.mega li .dropdown-menu {
  transform: translateX(-50%) !important;
  left: 50% !important;
  top: 40px !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9c9d2d5d2d4c7d6e69288908896">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<ul class="nav nav-pills mega">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <ul class="list-1">
        <li class="option-1">option 1</li>
        <li class="option-2">option 2</li>
      </ul>

      <ul class="list-2">
        <li>option 3</li>
        <li>option 4</li>
      </ul>

      <ul class="list-3">
        <li>option 5</li>
        <li>option 6</li>
      </ul>
    </div>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a
        >
        <div class="dropdown-menu">
          <ul class="list-1">
            <li class="option-1">option 1</li>
            <li class="option-2">option 2</li>
          </ul>

          <ul class="list-2">
            <li>option 3</li>
            <li>option 4</li>
          </ul>

          <ul class="list-3">
            <li>option 5</li>
            <li>option 6</li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a
          class="nav-link dropdown-toggle"
          data-toggle="dropdown"
          href="#"
          role="button"
          aria-haspopup="true"
          aria-expanded="false"
          >Dropdown</a
        >
        <div class="dropdown-menu">
          <ul class="list-1">
            <li class="option-1">option 1</li>
            <li class="option-2">option 2</li>
          </ul>

          <ul class="list-2">
            <li>option 3</li>
            <li>option 4</li>
          </ul>

          <ul class="list-3">
            <li>option 5</li>
            <li>option 6</li>
          </ul>
        </div>
      </li>
    </ul>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232465c445c42">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></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

URL multiplying on its own accord

Do you have any idea why my subdomain's website is suddenly duplicating its URL and giving me an error? The correct URL is , but it ends up as this . When this happens, my site appears broken, almost as if the CSS setup is not correct. ...

phpurlbootstrap-4

Setting the value of an input box using jQuery

As someone who is new to jQuery, I am encountering an issue with setting a default value for an input text box. Despite trying both the val method and the .attr method, neither has seemed to work for me. Below you will find the input HTML along with the tw ...

jqueryhtmlformsbusiness-catalyst

Organize group data by month in a visually appealing table using HTML/PHP with

I have successfully implemented a code that prints HTML table rows from a database table and sorts them by date. The challenge lies in the fact that the date is stored as VARCHAR (due to a pre-existing project with an active database used in a PHP web app ...

phphtmlsql

Django positions the save button

Is there a way to update the data in this column using a form, display and save the data, and also add a delete button? I'm seeking a solution for this issue. models.py class Employe(models.Model): Matricule = models.CharField(max_length=10, null=Fal ...

pythonhtmldjango

Ways to make an image wander aimlessly across a webpage while also spinning as it moves (with the help of jQuery or CSS)

I am working on making a div randomly move around a page. This is a related question Now, I have replaced the div with a picture like an "arrow" and I want it to randomly move while also pointing in the right direction by changing its rotation angle as i ...

jquerycsshtmlanimation

Perfect CSS Menu Hover Effect

I created my own navigation menu, and I'm struggling with one thing... How do I change the A tag color to white when hovering over the ul id "navitemul"? I've tried #lovedating#navitemul:hover #lovedating a {color:white} and other methods, but no ...

csscolorshover

Struggling to Position Advertisement in CSS

I've been struggling to properly center a div using CSS. Adding text-align: center; doesn't seem to do the trick. The issue can be found in the top advert on this website: . Do you have any suggestions? Here's some sample code: HTML: &l ...

htmlcssalignment

collapsed navbar issue in Bootstrap 4

The Navbar-toggle button was initially located on the top-right in both web and mobile modes. However, when the navbar collapsed in mobile mode, something went wrong (refer to the last image). I believe that the issue lies within the order of lines in my ...

mobilealignmentbootstrap-4navbar

Efficient code for varying layouts of disabled Angular Material buttons

I've been wondering if there's a simpler way to customize the appearance of a disabled button using Angular Material. Currently, I achieve this by utilizing an ng-container and ng-template. While this method gets the job done, the code is not ve ...

cssangularif-statementangular-material

Can one utilize HTML's .querySelector() method to target elements by xlink attribute within an SVG document?

Here is the scenario: <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="url"></a> </svg> </body> Now, can you utilize the HTML DOM's .querySe ...

javascripthtmldomsvgxlink

Divide the PHP code into separate files

Can someone help me with a coding dilemma I have? I couldn't find any information on Google or this site about it. A friend of mine who has experience in website development and runs his own business uses an interesting system that is new to me. He ...

phphtmlincludesplit

Select all feature in checkbox is malfunctioning

I need to implement a feature with 3 checkboxes: When the "A" checkbox is clicked, only "A" should be highlighted. Upon clicking the "C" checkbox, only "C" gets highlighted. If the "B" checkbox is clicked, both "A" and "B" nee ...

jqueryhtmlcsstwitter-bootstrap

Vertical alignment issue with Primefaces ConfirmDialog after AJAX form update

One issue I am facing is with a form that expands using Ajax+Rendered when certain operations are clicked. The problem arises when my p:confirmDialog is not vertically centered as the form grows. It is perfectly centered when at its "normal size." I have ...

javahtmljsfprimefaces

Prevent zooming or controlling the lens in UIWebview while still allowing user selection

Is there a way to disable the zoom/lens on uiwebview without affecting user selection? I'm trying to avoid using "-webkit-user-select:none" in my css. -webkit-user-select:none ...

javascriptioscssuiwebview

What is the best way to capture the input value upon pressing the "Enter" key?

My first question here is about implementing the addtodo(todo) code. After trying it out successfully, I wanted to make it work when typing and pressing enter. However, despite attempting some other methods, I couldn't get it to work. I didn't re ...

javascripthtmlcss

Tips for adjusting the size of an HTML canvas to fit the screen while preserving the aspect ratio and ensuring the canvas remains fully visible

I'm working on a game project using HTML canvas and javascript. The canvas I am using has dimensions of 1280 x 720 px with a 16:9 aspect ratio. My goal is to have the game displayed at fullscreen, but with black bars shown if the screen ratio is not 1 ...

javascripthtmlcsscanvas

Efficiently loading Google Visualizations for core charts by utilizing AJAX within jQueryUI tabs

Loading Google Visualizations via AJAX in jQueryUI tabs After encountering a similar issue, I discovered a solution provided in the link above that partially resolved my problem. I am trying to use Google Visualization core charts within jQueryUI tabs wit ...

jqueryhtmlajaxjquery-uigoogle-visualization

Compressing CSS with the help of Gulp

Can anyone assist me with minifying my css in this gulpfile.js for compiling css? I have tried multiple code snippets from the internet but none of them seem to work. Your help would be greatly appreciated. Thank you. var gulp = require('gulp&apo ...

csssassgulpgulp-sassgulp-minify-css

What is the best way to change the status of a disabled bootstrap toggle switch?

I'm working with a read-only bootstrap toggle that is meant to show the current state of a system (either enabled or disabled). The goal is for it to update every time the getCall() function is called. However, even though the console logs the correct ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-4

Troubleshooting: Issues with CSS fixed positioning

Whenever I try to scroll down, my navbar moves along with the page. Even when I resize the window, it keeps shifting despite using position:fixed. What mistake am I making? nav li:nth-child(1) { position: fixed; border: 1px solid #15317E; font-si ...

csscss-position