0

Есть меню 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>

1 ответ 1

0

Один из вариант "в лоб" это сразу задать margin для меню. Что он добавлялся не после раскрытия

.navbar-toggler {
  margin-top: 65px;
}
<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>

2
  • и что вы с таким лбом решаете? Зачем сместили меню вниз?
    – Вася
    18 окт 2019 в 6:47
  • Скорее всего я так понял вашу задачу. И видимо не правильно. 18 окт 2019 в 14:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.