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) 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 This is the large logo I wish to use: 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 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 :blush:

Put your CSS in desktop only? Not common.

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?)

[image] 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

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) But it doesn’t seem to have made any difference. Have I added the correct code?

[image] 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

Just a little note to say “Thank you!” @Trash - it’s looking 10x better now :clap:t2: :smiley:

I have perhaps spoken too soon :blush: Everything works fine: [IMG_0605] 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: [PNG] Is there a way to disable or hide my large logo when replying?

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

Soooooo close! :smiley: :+1: 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 And a screen shot: [16]

I’ve also noticed that on mobile it would appear that both images are now displaying at the same time: [mobile] So to confirm, while this latest solution does work, it has introduced two new issues: The scrolling page content is visible behind the top header now (as per this post above) Both logos are visible on mobile phones We are very nearly there :smiley:

[image] 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 :smiley: Thanks again @Trash for all the help here too :+1:

Trying to use a large top logo - unsuccessfully!

Product Support

dax (Daniela) November 10, 2017, 8:58pm 3

You need to add some media query to your stylesheet

Topic		Replies	Views
Big header, scroll down, make header small (Like default size) Product Support	14	5765	March 4, 2019
Any way to change at what width the small logo appears? Development	8	294	July 29, 2026
Mobile logo in header broken Product Support	14	2018	November 23, 2018
[Paid] Big 120px Logo to Small 40px Logo Smooth Transition (COMPLETE) Marketplace	5	3448	June 2, 2018
Big Header - Little Header Theme component	42	9107	October 14, 2026

Trying to use a large top logo - unsuccessfully!

Related topics