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