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