Brand header theme component


(Vinoth Kannan) #44

As you can see in the image you have to add URLs next to the link and icon names separated by comma (,).

(Cheng Zheng) #45

Thank you very much!


Is there a way to make it so links open in a new tab? Thanks!

(Jay Pfaffman) #47

There is a user setting to open links in new tab.


That’s been working for links in posts but not for links I added through this header.

(Vinoth Kannan) #49

Currently it doesn’t have option for it. You have to modify the theme component according to your need.

(Craig) #50


After installing this, it appears as though the header scrolls off the page. Is there a way to fix the header in place above the existing discourse header?

(Vinoth Kannan) #51

I am unable to reproduce it. Can you give me a screenshot?

(Craig) #52

Oh, sorry for the confusion - I’m asking for the intended behavior?

Locally I see the brand header scroll off the page as I scroll through a long thread.

(Vinoth Kannan) #54

Try changing the .b-header css style like below

.b-header {
  position: fixed;

You may require more CSS edits to achieve your goal.

(Craig) #55

Thanks Vinoth.

I found a couple of things help with this;

.b-header {
  position: fixed;
  z-index: 1001;
  height: $header-height;

.docked .d-header {
  margin-top: $header-height;

#main-outlet {
  padding-top: $discourse-content-padding + $header-height;

This causes the custom header to be static on scroll, and sit above the discourse header at all times.

The only disadvantage of this approach that I can see is the thread title appears in the discourse header a little later than normal, because of the additional static height of the header component.

Unsure of how to change this logic - its prolly in the bowels of discourse somewhere.

(David Kingham) #56

Would it be possible to add a font awesome icon next to the link similar to this?

(Vinoth Kannan) #57

Currently it’s not possible. You need to do some changes in the component to achieve that.

(David Kingham) #58

There seems to be some overlap with the primary header, I tried to add a border and the primary header is covering it up. If I change the height to 47px in inspector I can see the border, but if I add this to the css it doesn’t work.

.b-header {
    background-color: #393F4D !important;
    border-bottom-style: solid;
    border-color: #feda6a;
    border-width: 1px;
    height: 47px;

Another request would be to have the current page highlighted, or at least give each button it’s own class so I could change the color of a single button.

(David Kingham) #59

For those interested I was able to sort of achieve this, it’s not intelligent for what page you’re on, but for most, it will do the trick. Change the (2) to whatever position your forum button is

.b-header .nav-pills > li:nth-child(2) {
	background-color: #35373e;}

and if you would like the pill to extend to the top and bottom

.b-header .nav-pills>li>a {
padding: 13px 12px;

.b-header .contents {
	margin: 0px !important;

This achieves…

(Vinoth Kannan) #60

6 posts were split to a new topic: How to use brand header html in my WordPress site

(Craig Davison) #61

@vinothkannans in certain situations the screen looks like this:

This screenshot comes after someone deletes their account. I think it was also apparent on the email confirmation screen

(Craig Davison) #62

To clarify, it seems this issue happens on all 404 pages

(Vinoth Kannan) #63

@davisonio - you created another bug report here. Please avoid duplicates. I will check the issue.

(Sam Saffron) #64

I think we should probably spend some time and rewrite this so it no longer leans on the plugin interface and works on 404 pages and other pages without ember.