I figured out what it is. I was confused because the CSS is resizing my regular logo but only when a mobile logo is also entered. This is from template.css:
.navbar-brand.logo-control img.logo-img {
display: none;
max-height: 40px;
}
Display: None gets overridden (i don't know where), but the max-height gets applied (see image).
Toggling that line off in chrome makes all the views work correctly, so I'm not sure why it is necessary. I added an override to my custom.css to change the max-height to match my full size logo, which also makes it work as expected.
EDIT TO ADD:
I am now using this in my custom.css to adjust the logo for desktops (full size image), tablet (scale the full size), and mobile (it uses the mobile logo for best legibility). My logo now scales properly on all header examples in the demo instead of protruding into the section below at some resolutions:
@media (min-width: 576px) {
.navbar-brand.logo-control img.logo-img {
display: inline-block;
max-height: 65px;
}
}
@media (min-width: 1024px) {
.navbar-brand.logo-control img.logo-img {
display: inline-block;
max-height: 120px;
}
}