Brand header theme component


(Vinoth Kannan) #1




This theme component 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.



How do I install a Theme or Theme Component?

After installed the theme component you can customize it using theme settings.

Branding - Custom brand header with logo, navigation and icons
Is there a setting to add Facebook, twitter , Instagram profile links?
Add support for theme settings
Reuse Discourse Hamburger Functionality
How do I install a Theme or Theme Component?
Login with federated social networks
Header submenus
Introducing Font Awesome 5 and SVG icons
Branding - Custom brand header with logo, navigation and icons
WordPress in a Discourse iFrame?
Configuring the logo/home link in a subfolder instalation
Adding header in theme messes up topic progress bar (when docked)
Developer’s guide to Discourse Themes
How to structure a multilingual community
Smart mobile header
Beginner's guide to using Discourse themes
How to use brand header html in my WordPress site
How to finely scroll out custom header?
(Bhanu Sharma) #2

Just wanted to ask …

How does it work on mobile?

(Vinoth Kannan) #3

I added a screenshot for mobile version in OP.

(Bhanu Sharma) #4

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

(Vinoth Kannan) #5

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


(Bhanu Sharma) #6

This Looks brilliant!

(Daniela) #7

@vinothkannans there is a regression on mobile:

(Vinoth Kannan) #8

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

(Vincent) #10

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

(Vinoth Kannan) #11

You can do it via below CSS

.b-header {
  display: none;

.anon .b-header {
  display: block;


It is done too.

(Vincent) #12


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

(Vinoth Kannan) #13

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

(Sunny T) #14

Cool! Any support for dropdown menus at all?

(Vinoth Kannan) #15

No, currently it is not supporting dropdown menus.

(Vinoth Kannan) #16

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.

(Vincent) #17

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

(Vinoth Kannan) #20

@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.


(Vinoth Kannan) #22

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?