Предотвращение перетаскивания значка значка Navbar в верхней части логотипа бренда

Question

При использовании изображения с классом img-responsive на логотипе бренда, как вы предотвращаете значок переключения, который отображается, когда навигационная панель падает из укладки поверх логотипа? Я хочу, чтобы логотип уменьшался, когда окно браузера масштабируется.

См быстрый пример моей проблемы здесь: http://www.bootply.com/UP2MFV011K#

Мой логотип 398x120 точек и она должна иметь высоту navheader, чтобы позволить для своего размера. Затем, когда окно браузера масштабируется, уменьшает изображение логотипа, но не позволяет переключать значок навигатора на вершину. В настоящее время значок переключения в конечном итоге будет складываться сверху, прежде чем логотип начнет уменьшаться.

Answer 1

По умолчанию в загрузочных изображениях есть минимальная ширина 100%, что означает, что он переместит навигатор, как только окно браузера станет достаточно маленьким, чтобы освободить место для его 100% ширины. Вероятно, самым простым решением было бы изменить ширину полосы .navbar-брендов до 80% на экранах мобильных размеров. И добавление height:auto; даст вам желаемую отзывчивую высоту.

.navbar-brand{ 
    width:80%; 
    height:auto; 
} 

Посмотреть мое решение.

http://codepen.io/egerrard/pen/OMdWGy