# Brand Header
**URL:** https://meta.discourse.org/t/brand-header/77977
**Category:** Theme component
**Tags:** official, brand-header
**Created:** [January 14, 2018, 6:27am UTC](https://meta.discourse.org/t/brand-header/77977 "2018-01-14T06:27:03Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [January 14, 2018, 6:27am UTC](https://meta.discourse.org/t/brand-header/77977/1 "2018-01-14T06:27:03Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Brand Header** adds an extra top header for branding with your logo, navigation links, and social icons for both mobile and desktop views. Brand logo can be an image or text. |
| š | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/brand-header) |
| š | **Repository Link** | [https://github.com/discourse/discourse-brand-header](https://github.com/discourse/discourse-brand-header) |
| š | **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
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. š
>
> [ā **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=brand-header "Ask for support on configuring and using Brand Header") [š **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=brand-header "A bug report means something is broken, preventing normal/typical use of the theme component") [š **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=brand-header "Discussion about the user interface of Brand Header, and how features are presented (including language and UI elements)") [š” **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=brand-header "Discussion about how existing Brand Header features can be improved or enhanced, and how proposed new features could work")
### Features
Desktop preview:
Mobile preview:
### Settings
| Name | Description |
| --- | --- |
| brand name | |
| website url | |
| mobile logo url | |
| links | Text links to be displayed in the header |
| icons | Icon links to be displayed in the header |
| custom font awesome icons | List of FontAwesome 6 icons used in this theme component |
| show bar on mobile | |
| plugin outlet | |
### Using Font Awesome 6 Icons
To allow the Font Awesome 6 Icons to correctly display in this theme component, you will need to add them to 3 places in Discourse:
1. The `svg icon subset` Site Setting
2. The `custom font awesome icons` setting in the component
3. The `icons` setting in the component
Additionally, for some Font Awesome 6 Icons, you will need to specify a `fa` or `fab` prefix with the icon name (Ex: āfab-blueskyā), due to some icons being part of a specific subset of icons. See [Weāre upgrading our icons to Font Awesome 6!](https://meta.discourse.org/t/were-upgrading-our-icons-to-font-awesome-6/325349) for details about this usage.
Once youāve added those icons in all three places, you should see them correctly displayed in the brand header theme component.
> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.
> Last edited by @SaraDev 2025-01-02T20:46:25Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [October 25, 2018, 11:16pm UTC](https://meta.discourse.org/t/brand-header/77977/89 "2018-10-25T23:16:35Z")
@vinothkannans Great component!
One small issue. Currently, if a header link is internal to a site (e.g. to a particular category), if it is tapped in the responsive menu, the responsive menu will stay open. The expected behaviour is that the menu would close.
---
### Author:  [@permacultureProgram](https://meta.discourse.org/u/permacultureProgram)
#### Post date: [March 22, 2019, 5:56pm UTC](https://meta.discourse.org/t/brand-header/77977/109 "2019-03-22T17:56:37Z")
I am also seeing this issue for internal links, where the header does not disappear on mobile. Instead, the header slides right and leaves the main page opaque (I believe an overlay is being set), even if the header is folded back up.
Is there a fix for this?
---
### Author:  [@hosna](https://meta.discourse.org/u/hosna)
#### Post date: [April 10, 2019, 3:00pm UTC](https://meta.discourse.org/t/brand-header/77977/124 "2019-04-10T15:00:21Z")
In the mobile view, when we click on the hamburger menu, if then we click outside of the menu, the hamburger menu would be expanded even more, instead of closing. and also it has some other glitches. for example when hamburger menu is open and we click on a topic link.
[https://global.discourse-cdn.com/meta/original/3X/3/9/3935304b006f90645f9d6dd14964191a7ec00038.mp4](https://global.discourse-cdn.com/meta/original/3X/3/9/3935304b006f90645f9d6dd14964191a7ec00038.mp4)
---
### Author:  [@smileypants707](https://meta.discourse.org/u/smileypants707)
#### Post date: [September 14, 2019, 12:15am UTC](https://meta.discourse.org/t/brand-header/77977/143 "2019-09-14T00:15:24Z")
Iām curious, is there some sort of code I can use/edit to move the links to this side of the header?
Ideally with the fa-icons left in place (on the far right). Iād just like to see what it looks like.
---
### Author:  [@Stanzilla](https://meta.discourse.org/u/Stanzilla)
#### Post date: [January 27, 2020, 11:25pm UTC](https://meta.discourse.org/t/brand-header/77977/162 "2020-01-27T23:25:13Z")
Hey there, would you be open to adding an option to display the bar below the header instead of above?
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [January 28, 2020, 5:54am UTC](https://meta.discourse.org/t/brand-header/77977/163 "2020-01-28T05:54:25Z")
Sure, I will accept it if you can submit it in a PR.
---
### Author:  [@Stanzilla](https://meta.discourse.org/u/Stanzilla)
#### Post date: [January 28, 2020, 1:18pm UTC](https://meta.discourse.org/t/brand-header/77977/164 "2020-01-28T13:18:40Z")
Any hints as to what needs to be changed for that? I never worked with Discourse before.
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [January 29, 2020, 6:24am UTC](https://meta.discourse.org/t/brand-header/77977/165 "2020-01-29T06:24:59Z")
[https://github.com/discourse/discourse-brand-header/blob/master/common/header.html#L192-L194](https://github.com/discourse/discourse-brand-header/blob/master/common/header.html#L192-L194)
You should mount the widget in ābelow-site-headerā connector instead of āabove-site-headerā. It will require few more tweaks too.
---
### Author:  [@Stanzilla](https://meta.discourse.org/u/Stanzilla)
#### Post date: [January 29, 2020, 3:04pm UTC](https://meta.discourse.org/t/brand-header/77977/166 "2020-01-29T15:04:46Z")
Thanks, I got it to work! Will probably PR when I have a bit more time.
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [January 29, 2020, 7:11pm UTC](https://meta.discourse.org/t/brand-header/77977/167 "2020-01-29T19:11:34Z")
I merged your other PR which will add an optional target parameter to links.
[https://github.com/discourse/discourse-brand-header/pull/4](https://github.com/discourse/discourse-brand-header/pull/4)
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [August 23, 2020, 7:27am UTC](https://meta.discourse.org/t/brand-header/77977/185 "2020-08-23T07:27:46Z")
> [@vinothkannans](#):
>
> Edit: To be more clear this is how I planned
>
> 
This is now done in the commit below
[https://github.com/discourse/discourse-brand-header/commit/9292116ca9734743f02a7730db3387b1074a5adb](https://github.com/discourse/discourse-brand-header/commit/9292116ca9734743f02a7730db3387b1074a5adb)
---
### Author:  [@ClawdiaWolf](https://meta.discourse.org/u/ClawdiaWolf)
#### Post date: [August 29, 2020, 10:45pm UTC](https://meta.discourse.org/t/brand-header/77977/186 "2020-08-29T22:45:49Z")
I love this change, but on several sites where I use it personally, and on a hosted site Iām a moderator of (the NaNoWriMo forums) weāve been seeing some issues. Unlike the regular hamburger menu, if you try to swipe it away it bounces back onto the screen.
Iāve personally seen this on a fully updated Moto (g7) Power on Android 9 and on a fully updated iPhone 8.
There has also been at least one report of the menu opening on touches near the icon and not just on it, but Iāve personally been unable to reproduce that particular behavior.
---
### Author:  [@Stanzilla](https://meta.discourse.org/u/Stanzilla)
#### Post date: [September 28, 2020, 4:20pm UTC](https://meta.discourse.org/t/brand-header/77977/193 "2020-09-28T16:20:59Z")
Thanks! Turns out I did not have time to make a proper PR, do you think youāll be able to add the below/above site header setting?
---
### Author:  [@aaronbauman](https://meta.discourse.org/u/aaronbauman)
#### Post date: [March 4, 2021, 8:44pm UTC](https://meta.discourse.org/t/brand-header/77977/211 "2021-03-04T20:44:36Z")
Seems like it would be very useful to be able to add attributes to the header links somehow, e.g. for css class, target, etc.
---
### Author:  [@Rhidian](https://meta.discourse.org/u/Rhidian)
#### Post date: [April 6, 2021, 10:56am UTC](https://meta.discourse.org/t/brand-header/77977/213 "2021-04-06T10:56:35Z")
I have had a query as to why the menu is not working on mobile devices. The user pressed on the left burger menu but then on a menu link - and his perception was it wasnāt working as the menu still filled most of the screen.
Iāve had to explain you need to touch somewhere on the right of the screen, to the side of the menu, to close it.
Would it be possible to make it more intuitive, either by:
- Auto-closing the menu when you click on a menu link on mobile devices?
- Including a āClose Menuā button on mobile devices?
---
### Author:  [@jtbayly](https://meta.discourse.org/u/jtbayly)
#### Post date: [April 6, 2021, 12:11pm UTC](https://meta.discourse.org/t/brand-header/77977/214 "2021-04-06T12:11:35Z")
Iāve been meaning to make a similar request. I often try to dismiss the menu on mobile by swiping it to the left. It appears to be working, but then it pops back into place. The other menus in Discourse it works to swipe them back to the side to dismiss them.
---
### Author:  [@weber-s](https://meta.discourse.org/u/weber-s)
#### Post date: [February 26, 2024, 11:49am UTC](https://meta.discourse.org/t/brand-header/77977/251 "2024-02-26T11:49:15Z")
Hello!
We experiment different layout between two version of the same forum (discourse 3.2.0.beta4-dev and discourse 3.3.0.beta1-dev).
Here is an example with no custom CSS, just the raw composant.
| v3.2 | v3.3 |
| --- | --- |
|  |  |
Does the discourse HTML layout changed between the 2 versions?
Also the āslide-inā behaviour is broken in the v3.3.
---
### Author:  [@37Rb](https://meta.discourse.org/u/37Rb)
#### Post date: [June 25, 2024, 11:08pm UTC](https://meta.discourse.org/t/brand-header/77977/263 "2024-06-25T23:08:19Z")
Iām having this same problem on Discourse 3.2.2. The slide-in behavior is broken.
> [@Brand header mobile menu doesn't fully expand until window resize](https://meta.discourse.org/t/brand-header-mobile-menu-doesnt-fully-expand-until-window-resize/312422):
>
> Weāre having a problem where the brand header menu on the upper left only partially expands on mobile when tapped. We have it set to not display the bar on mobile. If I just tap the hamburger menu it looks like this. But if I then resize the window in any direction it expands fully and shows all the sub-links. How do I get it to expand fully when tapped without needed a window resize?
Iām wondering, seeing on the dates of the above posts, is the brand-header theme component still supported?
---
### Author:  [@37Rb](https://meta.discourse.org/u/37Rb)
#### Post date: [July 8, 2024, 3:25pm UTC](https://meta.discourse.org/t/brand-header/77977/264 "2024-07-08T15:25:04Z")
Based on the previous 2 posts, itās been broken for at least 5 months and no one has responded. Iām going to assume this theme component is dead unless someone says otherwise.
[Next page](https://meta.discourse.org/t/brand-header/77977.md?page=2)