Адаптивная панель навигации Bootstrap ⇐ CSS

[Anonymous]

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

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

Есть ли способ (возможно, используя less) стилизовать загрузочную панель навигации так, чтобы независимо от размера окна у меня был элемент слева, изображение в центре и элемент справа, и все они имели общую горизонтальную центральную ось с панелью навигации?

РЕДАКТИРОВАТЬ

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

Просто обратите внимание: я использую django для обслуживания HTML, отсюда и синтаксис для источника изображения.

Код: Выделить всё

#logo-with-slogan {
max-width: 35%;
padding: 3% 0 3% 0;
}

.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}

Код: Выделить всё

[url=#]
[img]{% static [/img]
[/url]

[list]
[*][url=#itemonelink]Item One[/url]
[*][url=#itemtwolink]Item Two[/url]
[/list]
[list]
[*][url=#signuplink]Signup[/url]
[*][url=#loginlink]Login[/url]
[/list]

Подробнее здесь: https://stackoverflow.com/questions/264 ... rap-navbar