Custom Header Links

haha, I have an idea,
I can use this component to achieve a bilingual website,
I can creat some chinese categories and some english categories,
and ues this component as the main navigation,
the title link include in the translate locales file en.yml and zh_CN.yml

the homepage and categories page i can use a translated theme component( even it’s a static page, ) achieve.

and hide the default category-drop,
and in my think, it is good for me just use two language in our website.

1 Like

Sorry if this is a bit of a basic question, but how would one go about changing the header font in this component? specifically hoping to use Convergence.

1 Like

haha, i get it, just move the header.html content to head_tag.html

get it from read again this topic

thanks johani and this joe guy. :blush: :blush: :blush: :blush:


The links are wrapped in a div with the class custom-header-links so you can use that to target them. Try adding this CSS to your main theme.

@import url('');

.custom-header-links {
  font-family: 'Convergence', sans-serif;

this worked great! thanks @Johani


Custom header link is not working after discourse update, please look into this!

1 Like

I just tried it and everything seems to work for me. Can you please post a link to your site?

1 Like

I just now updated the discourse and it seems to be not showing the custom header links.

There seems to be an issue with the retort plugin on your site which might be affecting this component.

1 Like

Should we remove it and then try?

Just, in case, can you double check if the component is added to your theme? I’m actually not seeing it in the source. If it is, then it’s likely that removing the plugin will fix your issue.



After disabling the retort from plugin, it seems to be working, also you were right the custom header links wasn’t there in component, I don’t know how it happened, no one changed it.


I confirm that disabling Retort on MakerForums makes custom header links return for us too. A hard choice! :slight_smile:

Edit: given the errors from Retort, no longer a hard choice. :wink:

The reason you need to disable that plugin is not because it’s incompatible with this component. You have to disable it because it’s currently broken with a JavaScript error. That error prevents the component from working. Once the error in the plugin is fixed, it should work just fine.


This should be reported on the retort topic, not here.

1 Like

@codinghorror once I was aware yesterday of the errors of my ways, I went to do just that and saw that @pfaffman was, as you might expect, way ahead of me:

Some of us just didn’t realize where the problem was up front…

Edit for anyone else who shows up with the same problem: The retort plugin has been updated, resolving this conflict.


I’m using this component - thank you!
Is there any way to customize it to have a button image, not just the text/word alone?
Similar to this thread: Custom Header Links

1 Like

Where do I do this?

1 Like

You imported the wrong link. Import from github with this link :

You’ll have every features


As the OP says, more than 1 header link will break the mobile interface such that one can’t see the hamburger or the profile button. It’s really too bad that we can’t simply hide header links when on mobile but show them while on desktop.

You have the Hide on scroll parameter. Why not add a Hide on mobile to be passed which can have the value of yes or no.

1 Like