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:

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
How to use brand header html in my WordPress site
WordPress in a Discourse iFrame?
Login with federated social networks
Customise home login page
How to finely scroll out custom header?
How to put a backlink to our company website above the top-menu in discourse?
Can I add a icon and link back to my homesite at the top bar
How to create additional header?
Customize the header with links, icons, or menus
🌅 Introducing Horizon, our newest theme
Customize Your Site Branding
Dropdown links in existing Header
Need to create good-looking front page with Discourse login option
How I can add a custom header
Horizon interaction with Brand Header
How to add top menu bar like try.discourse.org
How to add a directory of people/businesses to my theme?
How to create custom theme component?
Custom website header with forum
Brand header theme component breaks page layout on static and no_ember pages
Adding header in theme messes up topic progress bar (when docked)
Structuring a multilingual community
Brand header theme component breaks page layout on static and no_ember pages
Are these possible only with a custom theme?
Horizon Theme
How do I move an image/banner to the VERY top of the page?
TypeError: Discourse._registerPluginCode is not a function
DiscoTOC & Brand Header - using together
Brand Header breaks chat reply box on mobile (iOS)
Air Theme
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
Insert Link to External Website
Quick access to bookmarks and messages on user menu
Structuring a multilingual community
Help needed with theming and logo
How do the Links and Icons settings work?
Customizing your site with existing theme components
How to embed Discourse in Wordpress?

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

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.

안녕하세요, 헤더 아래에 표시되도록 옵션을 추가할 수 있을까요?

1개의 좋아요

네, PR로 제출해 주시면 받아들이겠습니다.

4개의 좋아요

이를 위해 무엇을 변경해야 하는지 힌트가 있을까요? 저는 이전에 Discourse를 사용해 본 적이 없습니다.

1개의 좋아요

https://github.com/discourse/discourse-brand-header/blob/master/common/header.html#L192-L194

위젯을 “above-site-header” 대신 “below-site-header” 커넥터에 마운트해야 합니다. 또한 몇 가지 추가 조정도 필요합니다.

6개의 좋아요

고마워요, 이제 작동하네요! 시간이 좀 더 나면 PR을 올리려고 해요.

4개의 좋아요

링크에 선택적 target 매개변수를 추가하는 다른 PR을 병합했습니다.

8개의 좋아요

이제 아래 커밋에서 완료되었습니다

4개의 좋아요

이 변경 사항은 마음에 들지만, 제가 개인적으로 사용하는 여러 사이트와 제가 모더레이터로 활동하는 호스팅 사이트(NaNoWriMo 포럼)에서 몇 가지 문제를 겪고 있습니다. 일반적인 햄버거 메뉴와 달리, 이 메뉴를 스와이프해서 닫으려 하면 화면에 다시 튀어나옵니다.

저는 Android 9가 설치된 완전히 업데이트된 Moto (g7) Power와 완전히 업데이트된 iPhone 8에서 이 문제를 직접 확인했습니다.

또한 아이콘 위가 아닌 아이콘 근처를 터치해도 메뉴가 열린다는 보고가 최소 한 건 있었지만, 저는 그 특정 동작을 직접 재현하지는 못했습니다.

2개의 좋아요

감사합니다! 결국 적절한 PR을 만들 시간이 없었습니다. 아래/위에 언급한 사이트 헤더 설정을 추가해 주실 수 있을까요?

1개의 좋아요

헤더 링크에 CSS 클래스, target 등의 속성을 추가할 수 있는 기능이 있다면 매우 유용할 것 같습니다.

1개의 좋아요

모바일 기기에서 메뉴가 작동하지 않는다는 문의를 받았습니다. 사용자는 왼쪽 햄버거 메뉴를 누른 후 메뉴 링크를 클릭했는데, 메뉴가 여전히 화면의 대부분을 차지하고 있어서 작동하지 않는다고 느꼈습니다.

메뉴를 닫으려면 메뉴 옆, 화면 오른쪽 어딘가를 터치해야 한다는 점을 설명해 드렸습니다.

다음 중 하나로 더 직관적으로 개선할 수 있을까요?

  • 모바일 기기에서 메뉴 링크를 클릭할 때 메뉴가 자동으로 닫히도록 하는 것
  • 모바일 기기용 ‘메뉴 닫기’ 버튼을 추가하는 것
1개의 좋아요

저도 비슷한 요청을 하고 싶었습니다. 모바일에서 메뉴를 왼쪽으로 스와이프하여 닫으려 하면 동작하는 것처럼 보이지만, 다시 원래 위치로 돌아옵니다. Discourse의 다른 메뉴들은 옆으로 스와이프하면 정상적으로 닫히는데, 이 메뉴만 그렇지 않습니다.

1개의 좋아요

안녕하세요!

동일한 포럼의 두 버전(discourse 3.2.0.beta4-dev와 discourse 3.3.0.beta1-dev) 간 레이아웃을 비교 실험하고 있습니다.

커스텀 CSS 없이 순수한 컴포넌트만 사용한 예시입니다.

두 버전 사이에 discourse의 HTML 레이아웃이 변경되었나요?

또한 v3.3에서 “slide-in” 동작이 깨져 있습니다.

2개의 좋아요

저도 Discourse 3.2.2에서 동일한 문제를 겪고 있습니다. 슬라이드 인 동작이 깨져 있습니다.

위 게시물의 날짜를 보니, 브랜드 헤더 테마 구성 요소가 여전히 지원되는지 궁금합니다.

이전 두 게시물에 따르면, 최소 5개월 동안 고장 난 상태이며 아무도 답변하지 않았습니다. 다른 의견이 없다면 이 테마 구성 요소는 더 이상 유지되지 않는다고 가정하겠습니다.