Enabling category banners causes duplicate category icons

[jordan-violet]

This is a fresh install of category-banners, on a category with an icon. For some reason, it duplicates the icon. Is there a way to default to the original category icon
being hidden when the category banners theme component is on?

[Moin]

I think you can use the css solution that was shared in Default category heading not hidden when category banner is used

[jordan-violet]

Didn’t even find that bug…sorry!

[jordan-violet]

It still doesn’t align the text to the center of the icon, which I guess is another issue also mentioned in that topic with no resolution.

@Moin any chance you know that one?

[CocoQuark (Coconut Flavored Quark)]

I don’t know very well the grid layout. That said…

If you don’t display the category descriptions at all, you can replace

.category-title-contents {
    display: grid;
    grid-template-areas:
        "logo title"
        "logo description";
    grid-template-columns: auto 1fr;
}

with

.category-title-contents {
    display: grid;
    grid-template-areas:
        "logo title";
    grid-template-columns: auto 1fr;
}

The original layout splits the container into 4 cells, which misaligns the title:

Removing the “logo description” area makes it 2 cells:

Which allows you to vertically align the title by replacing:

.category-title-contents .category-title {
    grid-area: title;
    align-self: end;
}

with

.category-title-contents .category-title {
    grid-area: title;
    align-self: center;
}