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

**URL:** https://meta.discourse.org/t/big-header-scroll-down-make-header-small-like-default-size/32201
**Category:** Support
**Created:** [August 17, 2015, 10:00am UTC](https://meta.discourse.org/t/big-header-scroll-down-make-header-small-like-default-size/32201 "2015-08-17T10:00:56Z")
**Posts on this page:** 1
**Showing post:** 8

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [May 7, 2016, 9:43pm UTC](https://meta.discourse.org/t/big-header-scroll-down-make-header-small-like-default-size/32201/8 "2016-05-07T21:43:36Z")

</div>

> [@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:

```css
// 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:

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

```

---

_[View the full topic](https://meta.discourse.org/t/big-header-scroll-down-make-header-small-like-default-size/32201)._