Brand Header

: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 a image or text.
:eyeglasses: Preview Preview on
:hammer_and_wrench: Repository Link
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Desktop preview:

Mobile preview:


After installing the theme component, you can customize it using these theme settings:

For some more functionality, you can extend the links in the settings and add “target” parameters using this format:


Just wanted to ask …

How does it work on mobile?

1 Like

I added a screenshot for mobile version in OP.


It’s (kinda) overlapping the existing menu! … Can’t the hamburger be placed on the left side to prevent that?

1 Like

Yes I already have that idea and it will be added in future development. In the meantime #pr-welcome from the community contributors.

Edit: To be more clear this is how I planned



This Looks brilliant!

1 Like

@vinothkannans there is a regression on mobile:


It should be a minor z-index issue. I will fix it soon.


Great theme component. How would you proceed to hide it for logged-in users?

You can do it via below CSS

.b-header {
  display: none;

.anon .b-header {
  display: block;


It is done too.



Is there a default way in this plugin to display a background image in the brand header? Like the way 000webhost did.

No. You have to add custom css by specifying background-image style attribute to the .b-header class.


Cool! Any support for dropdown menus at all?

No, currently it is not supporting dropdown menus.

Instead of creating custom theme component to set brand values now theme settings feature is implemented. You can find the details in OP.

Note: To get theme settings feature you have to be in the latest version of Discourse. Also remove and re-add this component if theme settings not appeared after upgrading both component and Discourse.


I already tried that. It doesn’t look like it’s enough:

@lll @jomaxro it is .b-header only. He like to remove brand header (b-header) for logged in users.

@_vincent you need to add few more similar css methods to hide it fully. For more details see common.scss file in theme’s common folder.


Vinoth, I had an earlier version of this and just updated. Now I’m not getting the menu, just a blank space at the top of the page. I’m using the Vincent theme. My older version had the menu defined in the header. I pulled that out and added the config into the theme settings. I also pulled out some CSS changes I had made in the Parent theme.

Still nothing. Thanks for all your work on this.


Sorry @ninermac, I forgot to mention that it doesn’t have ability to migrate existing data to new theme settings. Actually you don’t need the custom theme which used to change settings any more. So you have to set the values for the settings to get it worked. Else you have to revert back to the older version of the theme.

I did put all my settings into the new theme fields.

Easiest way to revert back?