Brand header theme component

[vinothkannans (Vinoth Kannan)]

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.

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:

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

	Repository	github.com/discourse/discourse-brand-header
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

[itsbhanusharma (Bhanu Sharma)]

Just wanted to ask …

How does it work on mobile?

[vinothkannans (Vinoth Kannan)]

I added a screenshot for mobile version in OP.

[itsbhanusharma (Bhanu Sharma)]

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

[vinothkannans (Vinoth Kannan)]

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

[itsbhanusharma (Bhanu Sharma)]

This Looks brilliant!

[Dax (Daniela)]

@vinothkannans there is a regression on mobile:

[vinothkannans (Vinoth Kannan)]

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

[_vincent]

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

[vinothkannans (Vinoth Kannan)]

You can do it via below CSS

.b-header {
  display: none;
}

.anon .b-header {
  display: block;
}

Edit:

there is a regression on mobile:

It is done too.

[_vincent]

Thanks!

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

[vinothkannans (Vinoth Kannan)]

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

[sunnyt7 (Sunny T)]

Cool! Any support for dropdown menus at all?

[vinothkannans (Vinoth Kannan)]

No, currently it is not supporting dropdown menus.

[vinothkannans (Vinoth Kannan)]

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]

.b-header {
display: none;
}

.anon .b-header {
display: block;
}

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

[vinothkannans (Vinoth Kannan)]

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

[ninermac]

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

[vinothkannans (Vinoth Kannan)]

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.

[ninermac]

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

Easiest way to revert back?