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 an image or text.
:eyeglasses: Preview Preview on Discourse Theme Creator
: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

Features

Desktop preview:

Mobile preview:

discourse-brand-header-mobile

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

:discourse2: 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 documentPerform check on document:
81 Likes

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

Screenshot%20at%20Oct%2026%2010-13-03

5 Likes

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?

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.

1 Like

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.

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

1 Like

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

4 Likes

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

1 Like

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.

5 Likes

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

4 Likes

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

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

8 Likes

This is now done in the commit below

4 Likes

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.

2 Likes

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?

1 Like

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.

1 Like

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?
1 Like

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.

1 Like

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.

Does the discourse HTML layout changed between the 2 versions?

Also the “slide-in” behaviour is broken in the v3.3.

2 Likes

I’m having this same problem on Discourse 3.2.2. The slide-in behavior is broken.

I’m wondering, seeing on the dates of the above posts, is the brand-header theme component still supported?

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.