Есть меню bootstrap 4
, которое в мобильной версии раскрывается по бутерброду.
Мне нужно задать отступ от верхнего края меню и в самих пунктах и чтобы при раскрытии меню ничего не дергалось, а плавно раскрывалось. Как это сделать?
Код фидл
#collapsibleNavbar {
margin-top: 65px;
}
.navbar-light .show .navbar-nav .nav-link {
padding-top: 17px;
padding-bottom: 17px;
border-bottom: 1px solid #EAEAEA;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="">
Logo
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="collapsibleNavbar" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Main</a>
<div class="dropdown-menu">
<span class="subnav-item"><a class="dropdown-item" href="">List 1</a></span>
<span class="subnav-item"><a class="dropdown-item" href="">List 2</a></span>
<span class="subnav-item"><a class="dropdown-item" href="">List 3</a></span>
<span class="subnav-item"><a class="dropdown-item" href="">List 4</a></span>
<span class="subnav-item"><a class="dropdown-item" href="">List 5</a></span>
</div>
</li>
<li class="nav-item">
<a class="nav-link link" href="#link2">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link link" href="#link3">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link link" href="#link4">Link 4</a>
</li>
</ul>
</div>
</div>
</nav>