# Featured Categories Header
**URL:** https://meta.discourse.org/t/featured-categories-header/203779
**Category:** Theme component
**Created:** [September 16, 2021, 10:59pm UTC](https://meta.discourse.org/t/featured-categories-header/203779 "2021-09-16T22:59:32Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [September 16, 2021, 10:59pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/1 "2021-09-16T22:59:32Z")
| | | |
| --- | --- | --- |
| š | **Summary** | Feature categories on select views. |
| š | **Repository Link** | [Manuel Kostka / Discourse / Components / Featured Categories Ā· GitLab](https://gitlab.com/manuelkostka/discourse/components/featured-categories.git) |
| š | **New to Discourse Themes?** | [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
### Cards view
### List view
### Settings
You can switch between the two above layouts or choose _none_ and declare your own styles. You can also pick a route and set an outlet for the component.
### Template
```scss
.featured-categories {
&__container {
}
&__heading {
}
&__list-container {
}
&__category-container {
}
&__category-link {
.category-logo {}
.category-name {}
.category-description {}
}
```
---
### Author:  [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [September 21, 2021, 12:17am UTC](https://meta.discourse.org/t/featured-categories-header/203779/2 "2021-09-21T00:17:03Z")
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.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [September 23, 2021, 11:59am UTC](https://meta.discourse.org/t/featured-categories-header/203779/3 "2021-09-23T11:59:02Z")
> [@Zup](#):
>
> A toggle to display only on homepage
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!
---
### Author:  [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [September 23, 2021, 10:04pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/4 "2021-09-23T22:04:00Z")
> [@manuel](#):
>
> What would be the use case for having the logo?
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.
---
### Author:  [@valsha](https://meta.discourse.org/u/valsha)
#### Post date: [September 26, 2021, 10:06pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/5 "2021-09-26T22:06:31Z")
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.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [September 26, 2021, 10:59pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/6 "2021-09-26T22:59:55Z")
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:
```plaintext
.below-site-header-outlet.categories-header {
order: -1 !important;
}
.below-site-header-outlet.banner-themes {
order: -2 !important ;
}
```
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [September 26, 2021, 11:19pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/8 "2021-09-26T23:19:41Z")
> [@Zup](#):
>
> By the way, the ability to include custom links - not only categories - would be another desirable feature
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.
> [@Zup](#):
>
> 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.
I agree with that! I think dedicated banners for visitors and for newly-signed-up users can be helpful and welcoming.
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [September 26, 2021, 11:21pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/9 "2021-09-26T23:21:35Z")
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
---
### Author:  [@valsha](https://meta.discourse.org/u/valsha)
#### Post date: [September 27, 2021, 10:24am UTC](https://meta.discourse.org/t/featured-categories-header/203779/10 "2021-09-27T10:24:23Z")
Try this setting, it didnāt help me ā¹
---
### Author:  [@Rhod](https://meta.discourse.org/u/Rhod)
#### Post date: [August 22, 2022, 6:44pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/11 "2022-08-22T18:44:47Z")
I installed a theme-component but it doesnāt fit inside the main content, making it really look out of place (ugly), I use the air-theme.
Can help me please where I can make the component appear inside the dark color container?
It looks like this:
I would like it to look like this:
---
### Author:  [@AkaiBukai](https://meta.discourse.org/u/AkaiBukai)
#### Post date: [March 3, 2023, 8:47pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/12 "2023-03-03T20:47:50Z")
Hello,
Iām just starting with discourse and theming..
I want to have some kind of cards in the top like you can see in here: [Secret World Legends - Funcom Forums](https://forums.funcom.com/c/secret-world-legends/20)
This theme component seems to help toward that direction..
I installed it and I was able to select the categories I want to appear but I got only the titles..
Which makes sense as I do not set any picture yet..
My question (which is probably a dumb question as no one else have asked it yet) is how I can set the picture of the categories..
And how I āuploadā them?
Thank you for any help..
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 9, 2023, 3:15am UTC](https://meta.discourse.org/t/featured-categories-header/203779/13 "2023-03-09T03:15:01Z")
Goto your Categories settings you used to create category and sekect image tab.
Upload image
---
### Author:  [@Vasan\_Cannane](https://meta.discourse.org/u/Vasan_Cannane)
#### Post date: [November 6, 2023, 2:45pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/14 "2023-11-06T14:45:01Z")
Hi I am new to discourse so I have a question on featured Categories Header
I am trying to achieve this but i canāt
They have given a few line of code
```plaintext
html.categories-header{
.below-site-header-outlet.categories-header {
.wrap {
.categories-header-item {
[each item's link, logo, name..]
}
}
}
}
```
how can i specify the itemās link logo and name
Can anyone clarify this?
Thanks
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [November 6, 2023, 3:12pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/15 "2023-11-06T15:12:57Z")
Hi, welcome š
If you want to display an image like the one in the example, you need to select the relevant categories in the theme component setting and ensure that they each have an image assigned (category settings ā Images ā Category Logo Image)
---
### Author:  [@Vasan\_Cannane](https://meta.discourse.org/u/Vasan_Cannane)
#### Post date: [November 6, 2023, 3:31pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/16 "2023-11-06T15:31:44Z")
This is the Featured Categories theme component setting and I canāt find anything ā¹
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [November 6, 2023, 3:37pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/17 "2023-11-06T15:37:15Z")
You have to edit your category setting:
Click on `Images` tab:
ā¦and upload a _Categry Logo Image_!
---
### Author:  [@Vasan\_Cannane](https://meta.discourse.org/u/Vasan_Cannane)
#### Post date: [November 13, 2023, 6:56am UTC](https://meta.discourse.org/t/featured-categories-header/203779/18 "2023-11-13T06:56:49Z")
I have a row of products how can i break the products into multiple columns?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [November 13, 2023, 11:02pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/19 "2023-11-13T23:02:44Z")
Something like that?
If so, try this CSS. Add it to your theme CSS or in a component.
Inside, you can see variables you can control.
You can choose the number of columns, the gap between the elements, and the width of each element.
The elements are stacking automatically.
```css
.below-site-header-outlet.categories-header > div.wrap {
--ch-columns: 6;
--ch-gap: 2.5em;
--ch-width: 110px;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(var(--ch-width), 0fr));
gap: var(--ch-gap) !important;
max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap))) !important;
}
```
---
### Author:  [@Vasan\_Cannane](https://meta.discourse.org/u/Vasan_Cannane)
#### Post date: [November 14, 2023, 4:28am UTC](https://meta.discourse.org/t/featured-categories-header/203779/20 "2023-11-14T04:28:12Z")
Thanks for the help.
Can I ask for one more help
This is wat i am trying to achieve
can you please help me on that
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [November 14, 2023, 12:37pm UTC](https://meta.discourse.org/t/featured-categories-header/203779/21 "2023-11-14T12:37:55Z")
Try something like that:
```css
.below-site-header-outlet.categories-header > div.wrap {
--ch-columns: 4;
--ch-gap-row: 2em;
--ch-gap-col: 6em;
--ch-width: 120px;
& > div {
width: var(--ch-width);
}
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap-col))) !important;
}
```
[Next page](https://meta.discourse.org/t/featured-categories-header/203779.md?page=2)