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 theme-creator.discourse.org
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-brand-header
:open_book: New to Discourse Themes? Beginnerā€™s guide to using Discourse Themes

Install this theme component


Desktop preview:

Mobile preview:

discourse-brand-header-mobile

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:

fab-twitter,https://twitter.com/discourse,_blank
81 Likes

Just wanted to ask ā€¦

How does it work on mobile?

1 Like

I added a screenshot for mobile version in OP.

4 Likes

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

discourse-brand-header-mobile-new

9 Likes

This Looks brilliant!

1 Like

@vinothkannans there is a regression on mobile:

3 Likes

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

3 Likes

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;
}

Edit:

It is done too.

6 Likes

Thanks!

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.

4 Likes

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.

4 Likes

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.

4 Likes

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.

-Mac

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?