Hey guys
When I add an image, icon or emoji to a category, the category category-heading is sticky upon scrolling down and takes a lot of space.
Also affected is the category header theme component as the see my post below for reference.
tested on 3.6.0.beta2
Yes, I agree that’s an annoying side-effect.
I don’t have a solution for it unfortunately. The category heading is in the same sticky element as the navigation, and I can’t move the sticky property a level down, because sticky doesn’t work within a flexed element…
I’d advise you to hide or minimise the logo with css on mobile.
The sticky navigation also bothers me. It takes up too much space.
How can I turn that off?
There is no setting for it. You’ll have to overrule the CSS.
The Horizon Theme has a neat feature, where the Category description remains visible while the Topic List is scrolled:
While this is lovely on desktop, when space gets tight (e.g. on mobile) this makes the Topic list quite difficult to read (especially if the text is quite extensive)
This is an unintended side-effect of wanting to keep the navigation visible actually. I’m not sure it can be fixed (both elements may be in the same container or something? 
) and if I have to choose, I’ll stick with my original intend.
If someone feels like taking a look, be my guest though.
I solved it with CSS.
/* Disable Horizon sticky list-controls on mobile */
@media (max-width: 767px) {
.list-controls {
position: static !important;
top: auto !important;
transform: none !important;
margin-top: 0 !important;
}
}
Doesn’t that just ‘unstick’ both the description and the navigation on mobile?
We really want the description to disappear, while the navigation sticks.
The navigation also took up too much space.
At the moment, we’re considering using scrollable pills.
I’d like to make them sticky, but I haven’t managed to get it working yet.
Right, unfortunately there’s not a simple way to do this using CSS without also restructuring the layout.
The Horizon theme currently makes the entire .list-controls container sticky, which includes the category header. We can’t make the child .navigation-container sticky on its own, because sticky elements are stuck within their parent scrolling context.
We could restructure this area, but it’s one of those changes that would impact all the themes that style using the existing structure… so there’s a good chance of regression for other themes and customizations, even if they don’t have a sticky nav like this.
So what is the way forwards for this?
I do wonder if we should simply hide the category description on mobile for Horizon. It is kind of doubling up information anyway, in a space that is very tight.
I’ve achieved this with some simple CSS in the Mobile tab of a TC:
.category-heading.--has-logo {
display: none;
}
Perhaps this should be included in Horizon?
You just made the way forward: use custom CSS to tweak to your preferences 
Yeah, but in this case it is a wider issue with the Theme rather than just my preference. I find it hard to imagine someone who would actually like a large sticky category description on mobile devices - I don’t think that was ever your intent with the design.
It genuinely is unpredictable what people want in their community. I’m opting to leave it as-is, it’s easily hide-able if people choose to and that path is less confusing then “why doesn’t my category banner appear on mobile”.
What about hosting plans (i.e. the free plan) where admins cannot add custom CSS?
If some people genuinely want it (which I doubt), could there perhaps be a theme setting governing it?