Подскажите, как можно сделать пункт меню, который не будет скрываться и не будем менять режим работы в collapse-режиме?
Пример тут: https://jsfiddle.net/fqkqojhm/
Пункты горизонтального меню Menu1 и Menu2 стандартные, они автоматически скрываются при недостаточной ширине экрана.
Пункт меню OnTop должен быть постоянно виден.
Для этого я переместил его из .navbar-collapse в .navbar-header и добавил ему float:left (без этого в версии 3.3.7 весь navbar занимает всю ширину окна и кнопка раскрытия пунктов меню переносится на следующую строку).
В нормальном режиме (.open, когда ширина окна достаточна) все выглядит и работает нормально (пункт OnTop неотличим от Menu1 и Menu2).
Если ширину окна уменьшить, то во-первых меню чуть сдвигается, а во-вторых, подпункты меню выпадают не поверх него, а раздвигают navbar, увеличивая его высоту.
Насколько я понял, это происходит в nav>.navbar-header>ul.navbar-nav — в collapse-режиме он переопределяется, получая блочный режим и черный фон.
Если у ul для OnTop убрать класс navbar-nav, то navbar перестает раздвигаться, но слетает оформление.
Не подскажите, как правильно вынести один из пунктов в заголовок, чтобы в collapse-режиме его поведение не менялось?