Na stronie → https://bootstrap-menu.com/demos/megamenu.html, z którego chcę skorzystać, znajduje się mega menu.
Obecnie utknąłem na wyrównaniu. Dla <li>, chcę ustawić justify-content: space-between
Mam coś takiego
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="html, css bootstrap, mega menu, navbar, large dropdown, menu CSS examples" />
<meta name="description" content="Bootstrap 5 navbar megamenu examples with simple css demo code" />
<title>Demo - Bootstrap navbar megamenu dropdown. html code example </title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script>
<style type="text/css">
.navbar .megamenu{ padding: 1rem; }
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.navbar .has-megamenu{position:static!important;}
.navbar .megamenu{left:0; right:0; width:100%; margin-top:0; }
}
/* ============ desktop view .end// ============ */
/* ============ mobile view ============ */
@media(max-width: 991px){
.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
overflow-y: auto;
max-height: 90vh;
margin-top:10px;
}
}
/* ============ mobile view .end// ============ */
@media (min-width: 992px) {
.bordo {
padding: 0;
}
}
.container {
max-width: 1170px;
}
.bordo {
background-color: #90080a !important;
}
li.nav-item.dropdown.has-megamenu:hover {
background-color: #7b0204;
}
li.nav-item.dropdown.has-megamenu {
border-right: 1px solid #c88383;
}
li.nav-item.dropdown.has-megamenu:last-child {
border: none
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
/////// Prevent closing from click inside dropdown
document.querySelectorAll('.dropdown-menu').forEach(function(element){
element.addEventListener('click', function (e) {
e.stopPropagation();
});
})
});
// DOMContentLoaded end
</script>
</head>
<body>
<div class="container">
<!-- ============= COMPONENT ============== -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary bordo">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav ">
<li class="nav-item dropdown has-megamenu">
<a class="nav-link text-white" href="#" data-bs-toggle="dropdown"> Trio Ring Sets </a>
<div class="dropdown-menu megamenu" role="menu">
<div class="row g-3">
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu One</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Two</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Three</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div>
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Four</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
</div><!-- end row -->
</div> <!-- dropdown-mega-menu.// -->
</li>
<li class="nav-item dropdown has-megamenu">
<a class="nav-link text-white" href="#" data-bs-toggle="dropdown"> Trio Ring Sets </a>
<div class="dropdown-menu megamenu" role="menu">
<div class="row g-3">
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu One</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Two</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Three</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div>
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Four</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
</div><!-- end row -->
</div> <!-- dropdown-mega-menu.// -->
</li>
<li class="nav-item dropdown has-megamenu">
<a class="nav-link text-white" href="#" data-bs-toggle="dropdown"> Trio Ring Sets </a>
<div class="dropdown-menu megamenu" role="menu">
<div class="row g-3">
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu One</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Two</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Three</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div>
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Four</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
</div><!-- end row -->
</div> <!-- dropdown-mega-menu.// -->
</li>
<li class="nav-item dropdown has-megamenu">
<a class="nav-link text-white" href="#" data-bs-toggle="dropdown"> Trio Ring Sets </a>
<div class="dropdown-menu megamenu" role="menu">
<div class="row g-3">
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu One</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Two</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Three</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div>
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Four</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
</div><!-- end row -->
</div> <!-- dropdown-mega-menu.// -->
</li>
<li class="nav-item dropdown has-megamenu">
<a class="nav-link text-white" href="#" data-bs-toggle="dropdown"> Trio Ring Sets </a>
<div class="dropdown-menu megamenu" role="menu">
<div class="row g-3">
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu One</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Two</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Three</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div>
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Four</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
</div><!-- end row -->
</div> <!-- dropdown-mega-menu.// -->
</li>
<li class="nav-item dropdown has-megamenu">
<a class="nav-link text-white" href="#" data-bs-toggle="dropdown"> Trio Ring Sets </a>
<div class="dropdown-menu megamenu" role="menu">
<div class="row g-3">
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu One</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Two</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Three</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div>
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Four</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
</div><!-- end row -->
</div> <!-- dropdown-mega-menu.// -->
</li>
<li class="nav-item dropdown has-megamenu">
<a class="nav-link text-white" href="#" data-bs-toggle="dropdown"> Trio Ring Sets </a>
<div class="dropdown-menu megamenu" role="menu">
<div class="row g-3">
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu One</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Two</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Three</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div>
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Four</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
</div><!-- end row -->
</div> <!-- dropdown-mega-menu.// -->
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
</nav>
<!-- ============= COMPONENT END// ============== -->
</div><!-- container // -->
</body>
</html>
Nie jestem pewien, jak mam w tej chwili równomiernie rozmieścić elementy li. Zrobiłem ten sam układ wcześniej. Również na Bootstrapie → http://tomaszroot.usermd.net/menu.html
Co ja robię źle? Jak rozmieścić pozycje <li> w menu w sposób justify-content: space-between?