ブランドヘッダー

: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:

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

Using Font Awesome 6 Icons

To allow the Font Awesome 6 Icons to correctly display in this theme component, you will need to add them to 3 places in Discourse:

  1. The svg icon subset Site Setting
  2. The custom font awesome icons setting in the component
  3. The icons setting in the component

Additionally, for some Font Awesome 6 Icons, you will need to specify a fa or fab prefix with the icon name (Ex: “fab-bluesky”), due to some icons being part of a specific subset of icons. See We’re upgrading our icons to Font Awesome 6! for details about this usage.

Once you’ve added those icons in all three places, you should see them correctly displayed in the brand header theme component.

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

Last edited by @SaraDev 2025-01-02T20:46:25Z

Check documentPerform check on document:
「いいね!」 87
Is there a setting to add Facebook, twitter , Instagram profile links?
Beginner's guide to using Discourse Themes
Reuse Discourse Hamburger Functionality
Introducing Font Awesome 5 and SVG icons
WordPress in a Discourse iFrame?
How to use brand header html in my WordPress site
Can I add a icon and link back to my homesite at the top bar
Login with federated social networks
Customise home login page
How to put a backlink to our company website above the top-menu in discourse?
How to finely scroll out custom header?
How to create additional header?
🌅 Introducing Horizon, our newest theme
Customize Your Site Branding
How to embed Discourse in Wordpress?
Need to create good-looking front page with Discourse login option
How I can add a custom header
Horizon interaction with Brand Header
Customizing your site with existing theme components
Quick access to bookmarks and messages on user menu
How to add a directory of people/businesses to my theme?
Air Theme
How to create custom theme component?
Custom website header with forum
How do the Links and Icons settings work?
Adding header in theme messes up topic progress bar (when docked)
Structuring a multilingual community
Brand Header breaks chat reply box on mobile (iOS)
Help needed with theming and logo
Insert Link to External Website
Are these possible only with a custom theme?
Horizon Theme
Dropdown links in existing Header
How do I move an image/banner to the VERY top of the page?
Combining Brand Header and Header Submenus Plugins
How to add top menu bar like try.discourse.org
Brand header theme component breaks page layout on static and no_ember pages
Brand header theme component breaks page layout on static and no_ember pages
TypeError: Discourse._registerPluginCode is not a function
DiscoTOC & Brand Header - using together
Structuring a multilingual community
Display name of forum
How to make your side have a side-bar and external links
TavoWEB theme for Discourse
Why does the logo navigate to Discourse home not main site home
Customize the header with links, icons, or menus

@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

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

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

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

「いいね!」 4

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

「いいね!」 1

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.

「いいね!」 6

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

「いいね!」 4

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

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

「いいね!」 8

これは以下のコミットで完了しました

「いいね!」 4

この変更は素晴らしいですが、私が個人的に利用しているいくつかのサイトや、モデレーターを務めているホストサイト(NaNoWriMoフォーラム)では、いくつかの問題が発生しています。通常のハンバーガーメニューとは異なり、スワイプで消そうとしても、再び画面に戻ってしまいます。

この現象は、Android 9 に完全に更新された Moto g7 Power と、完全に更新された iPhone 8 の両方で確認しています。

また、アイコンの近くをタップした際にもメニューが開いてしまうという報告が少なくとも1件ありますが、私はその特定の動作を再現できていません。

「いいね!」 2

ありがとうございます!実は、適切なプルリクエストを作成する時間が取れませんでした。以下の/上記のサイトヘッダー設定を追加していただけるでしょうか?

「いいね!」 1

ヘッダーのリンクに、CSS クラスや target 属性などを何らかの方法で追加できるようにすると、とても役立ちそうですね。

「いいね!」 1

モバイルデバイスでメニューが機能しないという問い合わせを受けました。ユーザーは左側のハンバーガーメニューをタップした後、メニュー内のリンクを選択しましたが、メニューが画面の大部分を占めたままだったため、動作していないと感じたようです。

私は、メニューを閉じるには画面の右側、メニューの外側をタップする必要があると説明せざるを得ませんでした。

より直感的にするために、以下のような対応は可能でしょうか?

  • モバイルデバイスでメニュー内のリンクをクリックした際に、メニューを自動的に閉じる
  • モバイルデバイスに「メニューを閉じる」ボタンを表示する
「いいね!」 1

似たようなリクエストを投稿しようと思っていたところです。モバイル版でメニューを左にスワイプして閉じようとするのですが、一瞬閉じたように見えてすぐに元の位置に戻ってしまいます。Discourse の他のメニューでは、スワイプして閉じる機能が正常に動作しています。

「いいね!」 1

こんにちは!

同じフォーラムの2つのバージョン(discourse 3.2.0.beta4-dev と discourse 3.3.0.beta1-dev)で異なるレイアウトを試しています。

以下は、カスタムCSSなしの生のコンポーネントの例です。

DiscourseのHTMLレイアウトは、2つのバージョン間で変更されましたか?

また、「スライドイン」動作がv3.3で壊れています。

「いいね!」 2

Discourse 3.2.2 でも同じ問題が発生しています。スライドインの動作が壊れています。

上記の投稿の日付を見ると、brand-header テーマコンポーネントはまだサポートされているのでしょうか?

前の2つの投稿に基づくと、少なくとも5か月間壊れており、誰も応答していません。誰かが別のことを言わない限り、このテーマコンポーネントは廃止されたと仮定します。