Big header, scroll down, make header small (Like default size)

[simon]

@simon

It doesn’t work well on an iPad. It would be great to be able to detect that an iOS device is being used so that the custom header could be disabled for it.

It turns out that Discourse adds the class .discourse-touch for touch screens. Adding something like this will give you a fixed header on an iPad:

// force the Discourse header to remain fixed, even with iOS 'elastic scrolling'
.discourse-touch .d-header {
    position: fixed;
}

// hide the custom header on touch screens
.discourse-touch .brand-header {
    display: none;
}

// always display the site logo - without this is will disappear during the iOS elastic scrolling
.discourse-touch .d-header #site-logo {
    display: inline;
}

@Nick_Putman

…will also have a go at making the logo width responsive.

You could also try resize or reposition it based on media queries:

@media (max-width: 700px) {
  .brand-header .brand-logo {
    left: 0;
  }
}