Brand Header

[Discourse]

	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
	Repository Link	https://github.com/discourse/discourse-brand-header
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, support, bug, ux, and 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  Bug  UX  Feature

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 5 icons used in this theme component
show bar on mobile
plugin outlet

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-18T20:22:43Z

Check document

Perform check on document:

[angus (Angus McLeod)]

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

[permacultureProgram (Michael Pinkard)]

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?

[hosna]

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.

[smileypants707 (Chad Smiley)]

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.

[Stanzilla]

Hey there, would you be open to adding an option to display the bar below the header instead of above?

[vinothkannans (Vinoth Kannan)]

Sure, I will accept it if you can submit it in a PR.

[Stanzilla]

Any hints as to what needs to be changed for that? I never worked with Discourse before.

[vinothkannans (Vinoth Kannan)]

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.

[Stanzilla]

Thanks, I got it to work! Will probably PR when I have a bit more time.

[vinothkannans (Vinoth Kannan)]

I merged your other PR which will add an optional target parameter to links.

https://github.com/discourse/discourse-brand-header/pull/4

[vinothkannans (Vinoth Kannan)]

@vinothkannans

Edit: To be more clear this is how I planned

This is now done in the commit below

FEATURE: render header inside hamburger menu in mobile devices. (#6)

[ClawdiaWolf (Claudia)]

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.

[Stanzilla]

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?

[aaronbauman]

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.

[Rhidian (Rhidian Bramley)]

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?

[jtbayly]

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.

[weber-s (Samuël Weber/GwendalD)]

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.

[37Rb (Ryan)]

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

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. [Screenshot 2024-06-17 at 11.30.45 AM] But if I then resize the window in any direction it expands fully and shows all the sub-links. [Screenshot 2024-06-17 at 11.30.55 AM] 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?

[37Rb (Ryan)]

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.