For anyone interested, here’s my solution, which only targets the image.

I was also having this problem with the absolutely positioned image overlapping the nav items when viewed at certain viewport widths. I found that the suggested solutions didn’t elegantly fulfil the desired outcome (image was distorting on header resize and padding was a fixed value, making the image unnecessarily small). To overcome this, i.e. keep the image vertically aligned, but reduce it’s overall size, I opted for setting the anchor tag container to display as a table and the anchor tag (img container) to display as a table cell, vertically align to middle, with a max-width.

For me this solved the problem perfectly; allowing the image to still responsively resize, whilst avoiding a fixed padding size (that isn’t conducive with the responsive resizing of the header on page scroll)

@media (min-width: 768px) and (max-width: 991px) {
  .logo {
    display: table;
  }
  .logo a {
    display: table-cell;
    vertical-align: middle;
    max-width: 200px;
  }
}

Merv