Мобильный отзывчивый выпадающий список не перемещает контент должным образом?

Question

Я использовал заголовок bootstrap, когда его сворачивание изменялось на раскрывающееся, он перемещал нижнее содержимое вниз, изображение перемещалось правильно, но текст на изображении не перемещался должным образом

Изображение перемещается вниз при раскрытии, но текст остается постоянным, мне нужно наложить или переместить содержимое вниз

мой html код:

<nav class="navbar navbar-inverse">
  <div class="container-fluid" id="container">
    <div class="navbar-header" >
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar" style="background: black !important;"></span>
        <span class="icon-bar" style="background: black !important;"></span>
        <span class="icon-bar" style="background: black !important;"></span>                        
      </button>
      <img src="./assets/logo.png" class="logo" >
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#" class="head-link">About</a></li>        
        <li class="dropdown">
          <a class="dropdown-toggle head-link" data-toggle="dropdown"  href="#">Academic <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a class="head-link" href="#">Page 1-1</a></li>
            <li><a class="head-link" href="#">Page 1-2</a></li>
            <li><a class="head-link" href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a class="head-link" href="#">Locations</a></li>
        <li><a class="head-link" href="#">Solutions</a></li>
        <li><a class="head-link" href="#">Resources</a></li>
        <button class="sigin-btn">Signup</button>
      </ul>      
    </div>
  </div>
</nav>

<div class="container">
    <img src="./assets/Banner.jpg"  class="banner">
    <span class="cont-line1">Out of focus-</span>
    <span class="cont-line2">Achieve with us</span>
</div>

Answer 1

Наденьте этот пользовательский css на вас .dropdown-item Если у вас уже есть некоторые свойства, вы можете управлять им

.dropdown-item {
    display: block;
    max-width: 100%;
    padding:0;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

И добавить это css в ваш css файл

.navbar-collapse {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

Тогда все будет хорошо ... Надеюсь, это сработает для вас