Как сделать перекрывающееся изображение логотипа на навигационной панели boostrap 4, которая по-прежнему отзывчива?

Question

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

---

Добрый день,

Я использую Bootstrap как часть моих лесов Laravel Spark, и я борюсь с очень конкретным вопросом:

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

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

.navbar-brand {
    position: absolute;
}

.navbar-toggle {
    z-index:1;
}

Однако, как вы можете видеть, когда вы масштабируете окно браузера, это теперь «съедает» мою иконку гамбургера с точки зрения адаптивного дизайна (каламбур). Кроме того, логотип не масштабируется таким образом.

Поскольку я не на 100% подхожу для CSS и начальной загрузки, может ли кто-нибудь помочь мне, пожалуйста?

Спасибо Andreas

Answer 1

Я исправил это сам. Это основа

// HTML    
<a class="navbar-brand" href="{{ route('home') }}">
    <img src="/img/logo.png" class="img-fluid" alt="Responsive image">
</a> 

Это была только проблема CSS:

 // CSS
  .img-fluid {
        max-width: 100%;
        height: auto;
        position: absolute;
        top: 0;
    }

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

Answer 2

Используйте свойства top и left с позицией

.navbar-brand {
  position: absolute;
  top:0px;
  left:100px
}