Предотвратить Bootstrap Меню, идущее за нижний колонтитул

Question

Я разработал страницу с верхней навигацией, слайдером и нижним колонтитулом. это выглядит нормально на рабочем столе, но когда мы открываем / расширяем меню на мобильном устройстве, меню располагается за нижним колонтитулом.

Обратите внимание, что мы не можем добавить дополнительное пустое пространство между ползунком и нижним колонтитулом, чтобы предотвратить это, как описано в this

Ниже приведен снимок экрана с мобильного устройства:

Как мы можем решить эту проблему? помогите пожалуйста

Спасибо

Answer 1

Увеличьте z-индекс раскрывающегося меню на css. Например, если ваше раскрывающееся меню выглядит примерно так:

<div class="dropdown">
  <ul>
    <li><a>Home</a></li>
    <li><a>About Us</a></li>
  </ul>
</div>

Вам просто нужно убедиться, что z-index раскрывающегося списка больше, чем элемент нижнего колонтитула. Вы можете попробовать увеличить z-index вашего выпадающего элемента примерно так:

.dropdown {
    z-index: 999
 }

Убедитесь, что ваш выпадающий список имеет позицию, отличную от stati c, чтобы z-index был эффективным, а также z-index значение, которое вы задаете, должно быть больше, чем значение z-индекса вашего элемента нижнего колонтитула.