Как разместить изображение именно там, где я хочу (и реагировать) в Bootstrap NavBar

Question

Мне нужно имитировать навигационную панель на www.nielsen.com, в настоящее время мое изображение находится не в верхней части навигационной панели, и мне нужно, чтобы оно было выровнено по левому краю заголовка и перемещалось в зависимости от размера экрана. Как мне это сделать?

/* Navigation */
#menu.navbar-default {
	background-color: #fff;
	border-color: rgba(231, 231, 231, 0);
	height: 65px;
}

<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="https://i.stack.imgur.com/fKSTL.png" width="45" height="65" alt="Nielsen"> </a> </div>
  </div>
</nav>

Answer 1

Для вашего изображения, понять и добавить следующий CSS:

position: absolute;
left: 50%;
transform: translateX(-50%);

Для вашего фонового изображения, понять и добавить следующий CSS:

background: url(...) center;
background-size: 1000px;