Как отключить перенос иконки меню «гамбургера» на следующую строку при уменьшении изображения в bootstrap?

Question

[SimonTheSinger]

Доброго времени суток!

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





Параметры изображения в CSS:

.LogoImage {
display: inline-block;
max-width: 100%;
max-height: auto;
}

Заранее спасибо!

Comments

[Антон Литвиненко]

обертке display:flex

[SimonTheSinger]

Антон Литвиненко, не совсем понял что вы имеете ввиду.
навбар по умолчанию обернут, а если лого прописываю display: flex, то не меняется ничего(

[Антон Литвиненко]

SimonTheSinger, у флекс контейнера есть свойство flex-wrap, значение которого по умолчанию nowrap. Это значит что элементы флекс контейнера по умолчанию не переносятся на другую строку.
В данном случае логотип и бургер это элементы, а их родитель флекс контейнер

[SimonTheSinger]

Антон Литвиненко, спасибо за подсказку, после первого комментария включил nowrap, и конечно теперь текст не выезжает вниз. Как их отделить?

[Антон Литвиненко]

SimonTheSinger, с вашей разметкой не проканало. Вариант попроще, задайте на определённом Медиа логитипу какой нибудь max-width фиксированный, чтобы влазил бургер

[SimonTheSinger]

Антон Литвиненко, я изначально так и делал), просто стало интересно, можно ли это сделать адаптивно без media)
Спасибо за ответ!

[Виктор Таран]

Простите меня тупого но у вас логотип явно в svg, что вам мешает собственно его уменьшить при минимальном разрешение ?
для этого воспользуйтесь медиа запросом, укажите в нем разрешение при котором размер картинки будет меньше,
по факту это + 3 строчки в css
да и вообще подверстывать шапки и футеры на медиа все-же приходится
CSS

@media (min-width: 576px) { 
ну и тут вставляете что вам нужно изменить, соответственно когда будет min-width: 576px, сработают именно эти правила для вашего стиля
 }

Answer 1

[nikoly57]

Привет!
Можно сделать следующую структуру:

HTML

<div class="area">
    <div class="area-img">
        <img class="LogoImage" src="/img.png"> <!-- твой логотип -->
    </div>
    <div class="area-menu">
        <button></button> <!-- твоя кнопка меню -->
    </div>
</div>

CSS

.area {
 display: flex;
  flex-wrap: nowrap;
}

 .area-img,
.area-menu {
 display: flex;
}

 .LogoImage {
 width: 100%;
  height: auto;
 }