Как прижать к низу элемент навигационного меню

[hike]

Пытаюсь прижать к низу элемент навигационного меню.

Получилось абсолютно позиционировать эл-т относительно .navbar вот так http://plnkr.co/edit/q3nTJA48nmEgzjGG1LE1?p=preview

Однако, при уменьшении окна либо увеличении контента (кол-ва пунктов меню) http://plnkr.co/edit/3RFQhisLDGvGDKrZ535g?p=preview, абсолютно позиционированный пункт меню перекрывает соседние пункты. Как исправить такое поведение?

И еще вопрос. Для экранов планшетов и мобильных устройств (ширина < 992px) при разворачивании меню абсолютно позиционированный пункт перепрыгивает от конца контента к низу страницы. Визуально происходит передергивание изображения. Можно ли этого избежать?

Edited December 24, 2017 by hike

[Switch74]

чтобы пункты меню не перекрывались, можно для выпадающего меню сделать отступ снизу равный этому элементу
чтобы закрепить данный элемент снизу экрана (как это у вас сделано), можно попробовать не через absolute, а через fixed
если все же нужно чтобы он был после всех элементов меню то для ul.nav добавьте position:relative;
и что-то у вас там не очень здорово с версткой: среди <li> промелькивают <a> - мне кажется не стоит так делать

[hike]

13 часа назад, Switch74 сказал:

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

Не помогло. http://plnkr.co/edit/7sz7xL8KqXGwkkR7wnZD?p=preview

.navbar{
  padding-bottom:60px;
}

Цитата

чтобы закрепить данный элемент снизу экрана (как это у вас сделано), можно попробовать не через absolute, а через fixed

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

Цитата

если все же нужно чтобы он был после всех элементов меню то для ul.nav добавьте position:relative;

Тогда при уменьшении кол-ва пунктов меню, последний пункт меню не будет прижат к низу экрана, а будет прилеплен к контенту.

Цитата

и что-то у вас там не очень здорово с версткой: среди <li> промелькивают <a> - мне кажется не стоит так делать

Такой подход к созданию меню применяют https://htmlacademy.ru/courses/50 и https://getbootstrap.com/docs/3.3/components/#navbar

А как бы Вы сделали?

[Switch74]

padding нужно указывать для nav

[hike]

Все-таки никак не пойму, отчего футер перекрывает контент при уменьшении окна браузера в моем примере http://plnkr.co/edit/Fec2pBVzFcuKVQB8Zeea?p=preview , а в примере-оригинале не перекрывает http://getbootstrap.com/docs/3.3/examples/sticky-footer-navbar/ Я добавила все-лишь несколько ничего не значащих классов и перенесла относительное позиционирование с элемента html на элемент div.col-md-three. Больше ничего не делала, а поведение так разительно отличается. Почему?

Edited January 3, 2018 by hike

[Switch74]

в оригинале есть margin-bottom:60px; который и не дает перекрывать контент и footer идет за container 
у вас footer находится в container и стили уж совсем разные, а не слегка
но у вас я не заметил, чтобы footer наезжал на контент