Я пытаюсь найти способ объединить анимированное меню гамбургеров в bootstrap 4 с полноэкранным оверлеем меню.Проблема: когда я устанавливаю data-toggle = "modal" на кнопку, я получаю модальное наложение, но анимация свернутого меню гамбургера ("X") на заднем плане (то есть под наложением) становится неактивной.
С другой стороны, когда я заменяю атрибут "модальный" на "коллапс", анимация гамбургера работает нормально, но меню наложения не появляется.
Есть ли простой способ объединить эти две функции?
Это CSS:
body {
padding-top: 5rem;
margin: 0;
background: url(../assets/original/test.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
.base-layout {
padding: 3rem 1.5rem;
text-align: center;
}
/* Navbar responsive toggler + hamburger animation */
.navbar-toggler {
border: none;
background: transparent !important;
float: left !important;
margin-left: 15px;
margin-right: 0;
}
.navbar-toggler:focus {
outline: none;
background: transparent !important;
}
.navbar-toggler .icon-bar {
background-color: #fff;
transform: rotate(0deg) translate(0px, 0px);
transition: ease all .2s;
}
.navbar-toggler .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggler .icon-bar+.icon-bar {
margin-top: 4px;
}
/*.icon-bar:nth-child(2) {
width: 16px;
transition: ease all .2s;
}*/
.navbar-toggler:hover>.icon-bar:nth-child(2) {
width: 22px;
transition: ease all .2s;
}
.navbar-toggler:active>.icon-bar:nth-child(2) {
width: 22px;
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
transform: rotate(45deg) translate(5px, 4px);
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
opacity: 0;
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
transform: rotate(-45deg) translate(4px, -4px);
transition: ease all .2s;
}
/* Modal */
.modal-nav-content {
width: 100%;
height: auto;
}
.modal-nav-body {
margin-top: 100px;
}
.modal-nav-body ul {
list-style-type: none;
color: white;
margin: 0;
padding: 0;
width: 100%;
}
.modal-nav-body ul li {
text-align: center;
font-size: 130%;
padding: 8px;
text-transform: uppercase;
}
This is the HTML code:
<head>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark bg-transparent fixed-top">
<span class="navbar-brand" href="#"></span>
<!-- data-toggle="modal" :: COLLAPSE -->
<button type="button" class="navbar-toggler collapsed btn-open" data-toggle="modal" data-target="#nav-modal" aria-controls="nav-modal" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button>
</nav>
<!-- Modal -->
<div class="modal fade" id="nav-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-nav-content">
<div class="modal-nav-body">
<ul class="wrap-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #4</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<main role="main" class="container">
<div class="base-layout text-white text-left">
<h1>Title</h1>
<p class="lead">Lead text...</p>
</div>
</main>
<!-- Bootstrap core JavaScript placed at the end of the document so the pages load faster -->
<script src="https://bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>