# Trying to use a large top logo - unsuccessfully!
**URL:** https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855
**Category:** Support
**Created:** [November 10, 2017, 8:30pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855 "2017-11-10T20:30:10Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [November 10, 2017, 8:30pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/1 "2017-11-10T20:30:10Z")
Hi everyone,
I’m struggling to get a large-size top logo to display properly and I’m wondering if someone could help me out.
I’ve taken some code from both @simon and @Nick_Putman from this thread (which is a couple of years old now, unsure if still valid on current versions?): [Big header, scroll down, make header small (Like default size)](https://meta.discourse.org/t/big-header-scroll-down-make-header-small-like-default-size/32201)
When viewing on a desktop sized browser the large logo is displayed correctly. Then when you scroll down in a topic it disappears from view and gets replaced with the small logo. All correct, as expected, works fine.
On mobile (an old iPhone 5S) the small logo is displayed instead - again all working fine.
On an iPad Mini 2 there is NO logo/banner displayed at all - until you scroll down in a thread, then the small logo appears correctly. But until then, no logo is shown. And this is my issue, no logo on tablet sized devices.
I tried removing this section:
```
.discourse-touch .brand-header {
display: none;
}
```
At which point the big logo then appears on the iPad - but the big logo then also appears on mobile and it’s way too wide so it allows or forces the page to scroll left and right (horrendous!). But, the logo does appear.
So my dilemma here is how do I get my large logo to appear on the iPad Mini 2 size screens?
Or, how do I make the large logo responsive, so when viewed on Mobile it scales down to fit the width of the mobile?
If you’d like to see this issue in action, my discourse (running v1.9.0.beta14) is at [https://greyarro.ws](https://greyarro.ws)
This is the large logo I wish to use: [https://greyarro.ws/uploads/default/original/1X/e4b1b51b1c15174d8eba003302eaab349a94985c.jpg](https://greyarro.ws/uploads/default/original/1X/e4b1b51b1c15174d8eba003302eaab349a94985c.jpg)
Changes I’ve made thus far:
**Admin \> Settings \> logo url \>** (I’ve placed [a 1x1px transparent gif](https://greyarro.ws/uploads/default/original/1X/3442a95fe890ce4769b36b2ecc611b801a54cfb5.png) in here)
**Admin \> Customise \> Themes \> Default \> Edit CSS/HTML \> CSS**
```
.title .logo-big {
display: none;
}
.brand-header {
margin-bottom:-63px;
}
.brand-header .brand-logo {
z-index:5000;
position: relative;
}
// Force the Discourse header to remain fixed, even with iOS 'elastic scrolling'
.discourse-touch .d-header {
position: fixed;
}
// This displays the small logo on iPhone but then no logo is visible at all on iPad Mini 2
.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;
}
```
**Admin \> Customise \> Themes \> Default \> Edit CSS/HTML \> Header**
```
```
Hopefully I’ve supplied enough information - please let me know if you need any more details??
Thanks in advance 😊
---
### Author:  [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [November 10, 2017, 8:36pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/2 "2017-11-10T20:36:58Z")
FYI, unrelated or not I don’t know, but worth a mention:
The HR under the top banner seems to have some peculiar behaviour sometimes too. Can’t work out a pattern to reproduce it, but sometimes the HR is directly below the big logo, other times the HR is behind the logo (at it’s default height?)
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [November 10, 2017, 8:58pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/3 "2017-11-10T20:58:13Z")
> [@Richie](#):
>
> Or, how do I make the large logo responsive, so when viewed on Mobile it scales down to fit the width of the mobile?
You need to add some media query to your stylesheet
---
### Author:  [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [November 10, 2017, 9:16pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/4 "2017-11-10T21:16:57Z")
Hey @Trash thanks for the reply.
I’ve just added this to my CSS:
```
@media (max-width: 700px) {
.brand-header .brand-logo {
left: 0;
}
}
```
(as per [this post](https://meta.discourse.org/t/big-header-scroll-down-make-header-small-like-default-size/32201/8))
But it doesn’t seem to have made any difference.
Have I added the correct code?
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [November 10, 2017, 10:19pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/5 "2017-11-10T22:19:37Z")
> [@Richie](#):
>
> Have I added the correct code?
Nope, because your problem is the width, not the position.
Try to change only this:
```
.brand-header .brand-logo {
z-index: 5000;
position: relative;
margin-bottom: 8px;
max-width: 63%;
}
```
and comment out this one:
```
// This displays the small logo on iPhone but then no logo is visible at all on iPad Mini 2
/*.discourse-touch .brand-header {
display: none;
}*/
```
_Should_ resize the big logo globally for all devices based on their resolution
---
### Author:  [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [November 13, 2017, 2:09pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/6 "2017-11-13T14:09:05Z")
Just a little note to say _“Thank you!”_ @Trash - it’s looking 10x better now 👏🏻 😃
---
### Author:  [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [November 13, 2017, 8:54pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/7 "2017-11-13T20:54:56Z")
I have perhaps spoken too soon 😊
Everything works fine:
> 
Until you hit ‘Reply’ and the on screen keyboard opens on an iPad Mini, at which point the main big logo then re-appears and dominates most of the screen, so you can’t see what you’re typing:
> 
Is there a way to disable or hide my large logo when replying?
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [November 13, 2017, 9:08pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/8 "2017-11-13T21:08:57Z")
I think the problem here is `z-index: 5000;`.
Even if you try to create a new account, the logo partially cover the account window (on desktop).
Try in this way:
- remove `z-index: 5000;`
- add this line: `.d-header { background-color: transparent; }`
(if logo is cut at the bottom add `transparent !important;` )
---
### Author:  [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [November 13, 2017, 9:32pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/9 "2017-11-13T21:32:04Z")
Soooooo close! 😃 👍
The logo now stays hidden when the on-screen keyboard appears whilst replying to a post - this is excellent news!!
However, it appears to have introduced a new issue whereby the all the page contents that scroll upwards is now visible behind the header bar (if that makes sense)
Here’s an example thread: [Look what DJI have just released 10th November 2017 - General Drone Discussion - Grey Arrows Drone Club UK](https://greyarro.ws/t/look-what-dji-have-just-released-10th-november-2017/792/)
And a screen shot:
> 
---
### Author:  [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [November 14, 2017, 11:11am UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/10 "2017-11-14T11:11:24Z")
I’ve also noticed that on mobile it would appear that both images are now displaying at the same time:
* * *
So to confirm, while this [latest solution](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/8) does work, it has introduced two new issues:
1. The scrolling page content is visible behind the top header now (as per [this post](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/9) above)
2. Both logos are visible on mobile phones
We are very nearly there 😃
---
### Author:  [@schungx](https://meta.discourse.org/u/schungx)
#### Post date: [November 14, 2017, 2:13pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/11 "2017-11-14T14:13:05Z")
Put your CSS in desktop only? Not common.
---
### Author:  [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [November 14, 2017, 2:39pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/12 "2017-11-14T14:39:19Z")
> [@schungx](#):
>
> Put your CSS in desktop only? Not common
Ahhhhhhh!
How did I miss this?!
Thanks @schungx that’s fixed all the issues!
Looks great on mobile, tablet and desktop now 😃
Thanks again @Trash for all the help here too 👍
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [November 14, 2017, 3:14pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/13 "2017-11-14T15:14:30Z")
If you want that for mobile too, use this instead (in Common):
```css
.title .logo-big{display:none}
.brand-header{margin-bottom:-63px;height:185px}
.brand-header .brand-logo{z-index:999;position:relative;}
.d-header{z-index:998}
#site-text-logo{display:none}
@media only screen
and (max-device-width : 360px) {
.brand-header .brand-logo {max-width: 63%;}
.brand-header{margin-bottom:0px;height:0px}
}
@media only screen
and (min-device-width : 361px)
and (max-device-width : 640px) {
.brand-header .brand-logo {max-width: 63%;}
.brand-header{margin-bottom:0px;height:35px}
}
@media only screen
and (min-device-width : 641px)
and (max-device-width : 860px){
.brand-header .brand-logo {max-width: 65%;}
.brand-header{margin-bottom:0px;height:63px}
}
```
It’s not perfect for all devices, but it works
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 8, 2024, 12:44pm UTC](https://meta.discourse.org/t/trying-to-use-a-large-top-logo-unsuccessfully/73855/14 "2024-06-08T12:44:03Z")
This topic was automatically closed after 2401 days. New replies are no longer allowed.
