Создайте фиксированную навигационную панель в начальной загрузке, которая перемещает содержимое вверх при переключении

У меня есть два навигатора на моем веб-сайте, один в заголовке и прочее в нижнем колонтитуле

Часть заголовка работает нормально, но я хочу, чтобы нижний колонтитул был похож на навигатор, но, когда я перехожу в мобильный вид (меньший видовой экран), появляется кнопка переключения (функция начальной загрузки), но при нажатии на этот переключатель, он скользит вниз, и содержимое отображается под навигационной панелью, подвигаясь вверх, так что, может ли кто-нибудь помочь мне в этом?

Я не знаю, как включить Bootstrap в Fiddle, поэтому прямо отправляю мой код нижнего колонтитула. он включает в себя файлы начальной загрузки и файлы Fontawesome в моем прямом.

Got Bootply ссылка: http://bootply.com/104001

<footer>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="footer-bar-btns visible-xs">
                    <li><a href="#" class="btn" title="History"><i class="fa fa-2x fa-clock-o blue-text"></i></a></li>
                    <li><a href="#" class="btn" title="Favourites"><i class="fa fa-2x fa-star yellow-text"></i></a></li>
                    <li><a href="#" class="btn" title="Subscriptions"><i class="fa fa-2x fa-rss-square orange-text"></i></a></li>
                </ul>
            </div>
            <div class="navbar-collapse collapse" id="footer-body">
                <ul class="nav navbar-nav">
                    <li><a href="#">Browse Our Library</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Our Partners</a></li>
                    <li><a href="#">User Review</a></li>
                    <li><a href="#">Terms &amp; Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

Ответ 1

Мне удалось заставить это работать, просто изменив порядок. Вместо того, чтобы помещать свой заголовок на панели навигации перед вашими красными элементами, поставьте его после. Таким образом, вы не полагаетесь на позиционирование и не получаете flash/jump, когда панель заголовка и кнопка расширения перемещаются в нижнюю часть.

Вот демо: http://www.bootply.com/117444

Все, что я сделал, это переместить элементы развала div перед "заголовком" div с помощью кнопки

Ответ 2

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

footer .navbar-collapse.in {
    bottom: 70px;
    position: absolute;
    background-color:#333;
    width:100%;
}

Демо-версия Bootply: http://bootply.com/103653

Ответ 3

Решение Fix Skelly.

Добавьте еще один CSS:

@media screen and (max-width: 768px) {
  footer .navbar-collapse {
    position: absolute;
    bottom: 70px;
    width: 100%;
    background-color: #303030;
  }
}

http://www.bootply.com/4b6cSUMTzg