Custom Header Links

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

I probably misunderstood but the view option does what you seem to mention

View: vdm = desktop and mobile, vdo = desktop only, vmo = mobile only.

You can put as many links as you want (kinda), by using vdo view

1 Like

Yea I was mistaken. Silly me, I had it on vdm as default and didn’t realize it. It’s already good!

1 Like

I would like this too.

Essentially what I want is that on a small screen all links get hidden on scroll…

Right now I think I have to do:

  • Link A,title,url,target,vdo,keep
  • Link A,title,url,target,vmo,remove

It works OK, but it feels like a bit of a kludge and is confusing in the plugins list since the different text is cut off in the list of links.

To the earlier discussion of “mobile viewports” part of the thing I struggle with is that “mobile viewports” vary vastly in width. Right now, if I put any more than 1 plugin in the list I have issues with it running over the (more important) search and user menus. It seems like I want 4 links by default, but show as many as is logical. Unless there’s some other CSS messing with my setup, this doesn’t appear to be the default behavior.

1 Like

Have been looking at this for less than hour so hopefully its something dumb. but i cannot add a custom link that says “Directory”… Ive used this theme component with no issues for months, but i went to update some wording today and ran into this problem that doesnt seem to make sense.

I added this as the middle field in the custom header link settings:
Directory, Users within the community, /u?period=all, vdo, self, keep

and saw this:

Screen Shot 2020-07-29 at 1.40.31 PM
When i replaced that with this:

Directorz, Users within the community, /u?period=all, vdo, self, keep

it showed up:

Screen Shot 2020-07-29 at 1.41.09 PM

is “Directory” some type of special word in Discourse somewhere?

  • Reproduced on themes with no other Theme components enabled
  • Reproduced on a forum with no plugins installed

i cant think of a logical reason why this would happen so hopefully im just overlooking something, but can anyone reproduce this and/or know something about this odd behavior.


i see now theres a directory class in the common css that adds a margin… anything we can do in the theme component to help against class name overrides, maybe adding a suffix to the class like directory-custom-header-link?

PR here


PR merged thanks! :+1:


don’t know if this has been suggested, tried reading back but couldn’t find it.

was thinking that maybe adding the ability to create “sub-links” thus creating the idea of a list that you could edit (text color, background hover etc.) to get results similar to what zoom has


the links that have the arrow to the right like developer means that it has “sub-links”

1 Like

Is it possible to add some basic dropdown menu to an any item?

I couldn’t create a dropdown menu with “Custom header links”. It seems Zoom did that. I reviewed their dropdown menu via console, but I couldn’t figure out how they interfere with the html of this component for adding dropdown to any item.

Is there a way to add this dropdown to item? @Johani

<div id="dropdown">
  <a title="Zoom Developer Documentation" href="" target="_blank">Developer</a>
  <span class="caret"></span>
  <div class="dropdown-content">
    <a title="Zoom API Docs" href="" target="_blank">API</a>
    <a title="Zoom SDK Docs" href="" target="_blank">SDK</a>
    <a title="Zoom Developer Blog" href="" target="_blank">Blog</a>
    <a title="Zoom Developer Changelog" href="" target="_blank">Changelog</a>
    <a title="Zoom Developer Survey" href="" target="_blank">Survey</a>

Has anyone run into any issues with links not opening when setting links position to “left”?

Links work on Preview but not when I apply it to a theme.
Right alined links work fine though.

1 Like

Now that Discourse 2.6 formally supports Dark Mode, is there a way where upon switching to dark mode, the header links also take a light color? I noticed also the hamburger menu stays dark upon switching, is this related?

Update: Please ignore, the answer is of course that I had to change the color in the color palette of the theme.


How can I add a different color for the links?


Hi! Thanks for creating this.
Is it possible to add an SVG before the text link? If so - how?

1 Like

Have you found a solution for this? I am look for the same solution.


Hi @Johani - is this still the case? My instance seems reluctant to adopt the $header_primary colour, and curiously even when I set $primary to the colour I want (white), it remains stubbornly black :upside_down_face: !

Screenshot 2021-02-06 at 14.16.12


It’s probably related to the switch from SCSS to CSS variables for color declarations. Assigning $header_primary in custom css doesn’t work, but if you use

.custom-header-links .headerLink a {
    color: var(--header_primary);

the color gets picked up correctly.


I didn’t get this solution to work for me. Are you adding this to the theme’s custom CSS?

1 Like

Yes, it was indeed. The component now uses the CSS custom property, it should fix the issue for you @Daniel_R, you just need to update the component.


hi! is it possible to change the text color based on different themes ?

1 Like