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.
.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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>CodePudding user response：
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
CodePudding user response：
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%);
CodePudding user response：
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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>