Featured Categories Header

This theme component adds a row of featured categories as a header banner. It just shows logos and names, so you should have a logo on each category you want to feature:

You can pick the categories in the component settings. Also added a few style declarations to change the look right there:

Screenshot from 2021-09-16 23-40-32

So it’s easy to get some different basic styles:

To do more customization, the classes are

html.categories-header{
  .below-site-header-outlet.categories-header {
    .wrap {
      .categories-header-item {
        [each item's link, logo, name..]
      }
    }
  }
}
14 Likes

Handy TC, thank you.

A toggle to display only on homepage, display site logo, and display site description under logo would be desirable additions I imagine.

1 Like

Right now it shows on global lists (latest/new/unread/top). I was thinking of adding a drop-down to settings to select the global pages it should show. So, yes, on my roadmap when I have time for this again!

What would be the use case for having the logo? On the global pages you’re almost “home” anyways?

What I’d actually be most interested in adding is a mobile view. I didn’t have an idea for that so far, so it’s just not shown on mobile. Thanks for sharing If you’d have an idea for that!

1 Like

Personalized aesthetics, and combined with a short description, would be quick insight about a community for new visitors, and serve as a reminder for existing users about the mission of the community. Positioned above or left of the links.

Displaying this on global links by default, as well as optionally per category (and tag pages?), would serve as a convenient navigation menu for prioritized areas - this would be my primary intended use. (By the way, the ability to include custom links - not only categories - would be another desirable feature.)

Personally, I find that most Discourse sites tend to be on the vague side especially upon initial visit, and by default I think Discourse navigation can be confusing for the average user. Generally my sites are designed to prioritize only a few areas (of many), and these proposed additions would make it very clear to the average user what those areas are, as well as easy to access.

Good component,
We have installed Versatile Banner, how can we move this component UNDER Versatile Banner?
So that the component Versatile Banner is shown first and then yours.
Thank you.

Yes, both components are rendered on the same outlet. I don’t know what causes the order of elements in that case? On my site it shows under the banner by default…

But you should be able to target the order with CSS declarations:

.below-site-header-outlet.categories-header {
  order: -1 !important;
}
.below-site-header-outlet.banner-themes {
  order: -2 !important ;
}
1 Like

This sounds like many custom options though. I wouldn’t want to add that much logic to this component.
Building a featured navigation sounds more like a use case for a custom html banner to me? You’d just need some links with images and titles.

I agree with that! I think dedicated banners for visitors and for newly-signed-up users can be helpful and welcoming.

1 Like

There’s a ‘swap default positioning’ in the Versatile Banner settings, if that’s any good to you?

swap default positioning

If there is another banner-related component active, use this to swap its position with the Versatile Banner

2 Likes

Try this setting, it didn’t help me :frowning: