Trying to use a large top logo - unsuccessfully!

support
1

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

<div class="wrap brand-header">
    <a href="https://greyarro.ws/">
        <img class="brand-logo" src="/uploads/default/original/1X/e4b1b51b1c15174d8eba003302eaab349a94985c.jpg">
    </a>
</div>

Hopefully I’ve supplied enough information - please let me know if you need any more details??

Thanks in advance :blush:

2

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

3

You need to add some media query to your stylesheet

4 Likes
4

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?

5

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

4 Likes
6

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

4 Likes
7

I have perhaps spoken too soon :blush:

Everything works fine:

IMG_0605
IMG_0605.PNG2048×1536 208 KB

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
fd709fde3728103edf8393838bf9737cd3f47ed8.PNG.jpeg2048×1357 212 KB

Is there a way to disable or hide my large logo when replying?

8

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

1 Like
9

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 - Drone Discussion - Grey Arrows Drone Club UK

And a screen shot:

16
Screen Shot 2017-11-13 at 21.27.16.png804×229 27.3 KB

10

I’ve also noticed that on mobile it would appear that both images are now displaying at the same time:

mobile
mobile.jpg406×641 110 KB

So to confirm, while this latest solution does work, it has introduced two new issues:

  1. The scrolling page content is visible behind the top header now (as per this post above)
  2. Both logos are visible on mobile phones

We are very nearly there :smiley:

11

Put your CSS in desktop only? Not common.

4 Likes
12

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:

3 Likes
13

If you want that for mobile too, use this instead (in Common):

.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

4 Likes