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

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;
}

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

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