0

I have navbar with dropown nav-items using mega menu.

Mega menu is position:absolute.

How can i align mega menu to be in the center of the page? I am using the same mega menu component for all nav-items, so i need to do it dynamically.

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/bootstrap@4.6.0/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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Kate
  • 288
  • 2
  • 4
  • 17
  • 1
    Does this answer your question? [How to center a "position: absolute" element](https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element) – A. Meshu Oct 25 '21 at 13:28
  • @A.Meshu no because its getting the 50% according to the parent element (Nav-Item), i need to get left: 50% but according the page container or navbar. – Kate Oct 25 '21 at 13:32
  • 1
    Honestly think position:absolute is a huge problem. However you try to space everything or justify it the absolute position should override it. Try using a normal sticky-top navbar then looking at Bootstrap docs to see how they suggest centering :) https://getbootstrap.com/docs/5.0/utilities/flex/ – Cutey from Cute Code Oct 25 '21 at 19:55

3 Answers3

1

If I understand your question correctly, then you want to center the mega menu on the screen. You can achieve that with margin: auto. if you can provide the CSS as well that might help us give better answer for your use case

Abdelmuttalib Ahmed
  • 11
  • 1
  • "Margins make little sense on absolutely positioned elements since such elements are removed from the normal flow, thus they cannot push away any other elements on the page. Using margins like this can only affect the placement of the element to which the margin is applied, not any other element." http://www.justskins.com/forums/css-margins-and-absolute-82168.html – A. Meshu Oct 25 '21 at 13:36
  • @Abdelmuttalib Ahmed i have updated the question with sandbox example – Kate Oct 25 '21 at 13:53
  • Why do you need the menu to be center away if it's a dropdown? like if you click it, it will open on the center of the page and not below the dropdown arrow? – Abdelmuttalib Ahmed Oct 25 '21 at 15:38
  • @Abdelmuttalib Ahmed because it has overflow over the page container, and when i open mega menu for the last nav-item i am getting horizontal scroll. – Kate Oct 26 '21 at 06:43
0

if you want to center megamenu which is positioned absolute.

you should use this css on it to center it

top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Junaid Shaikh
  • 1,045
  • 4
  • 19
0

Absolutely-positioned elements are positioned with respect to their nearest non-static ancestor, so we need to make the list items that contain them static. This moves the positioning context to whatever's outside the list with non-static positioning. In this demo, it's the body element.

Then, we need to forcefully override some position and translation styles. One caveat is that the top value is hard-coded. This may need to be changed depending on the positioning context, and it may not work for all responsive scenarios.

One other tip: You probably shouldn't have your interior lists positioned absolutely. That's a troublesome strategy and probably isn't necessary. Consider using flexbox.

.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/bootstrap@4.6.0/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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
isherwood
  • 58,414
  • 16
  • 114
  • 157