Custom Header Links

Discourse · June 24, 2018, 10:22am


	Summary	Custom Header Links allows you to easily add custom text-based links to the header.
	Preview	Preview on theme-creator.discourse.org
	Repository Link	https://github.com/discourse/discourse-custom-header-links
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Samples:

Desktop

Mobile

(due to very limited space I don’t recommend adding more than one link on mobiles)

Settings:

Adding links is straightforward. Every link needs 6 items. You enter comma delimited values in this order:

link text, link title, URL, view, target, hide on scroll

Link text: the text for the link.
Link title: the text that shows when the link is hovered.
URL: The path for the link (can be relative).
View: vdm = desktop and mobile, vdo = desktop only, vmo = mobile only.
Target: blank = opens in a new tab, self = opens in the same tab.
Hide on scroll: remove = hides the link when the title is expanded on topic pages keep = keeps the link visible even when the title is visible on topic pages.

If you’re not sure what hide on scroll does, here’s an example:

Most Liked and Privacy are set to keep and so they remain visible. The other links are set to remove, and so are hidden when the title expands in the header. This only affects topic pages.

Links position: This setting allows you to change the default layout so links will appear on the left near the logo instead of on the right. Note that when positioned to the left, links will automatically be hidden when scrolling within topics to make room for the topic title.

sunilkosuri · December 13, 2020, 3:53pm

How can I add a different color for the links?

Johani · May 4, 2019, 2:46pm

I just pushed some updates to this component

https://github.com/discourse/discourse-custom-header-links/commit/175a027582eac0b95803b3675ea37faf527ae68c

Not currently no, but we have this component if you prefer icons

No plans to add those as parameters to the settings as I’m trying to keep those short.

However, links will now have CSS classes added to them based on their text. So a link with the text “Most Viewed” would have the class most-viewed added to it.

You can then use these styles to hide it for anons

.anon {
  .headerLink.most-viewed {
    display: none;
  }
}

If you want it to only be visible to anons, you can use

html:not(.anon) {
  .headerLink.most-viewed {
    display: none;
  }
}

this is beyond the scope of this component.

Merged, thanks for that

Thanks for this Can you please have a look at the new changes and update the PR? I’m fine with adding icons as long as it maintains backwards compatibility and the icons are not required.

See the bit above about how links now have CSS classes. You’ll be able to use something similar with the user’s primary group name since that’s also added as a CSS class to the <body> tag.

CSS stands for cascading style sheet. Cascading here is the key.

If you write two CSS rules with the same specificity, whatever comes last will always apply.

example

body {
  background: red;
}

body {
  background: green;
}

if you use the CSS above, the <body> tag will end up with a green background because that rule came later so it overrides whatever comes before it - again, this only works if the specificity is the same.

If the specificity is not the same, whatever rule that’s more specific will apply regardless of the order. So, your CSS works because it’s loaded after the CSS from the component and it’s as specific.

awesomerobot · November 12, 2019, 8:52pm

I’ve added a setting to this theme that allows the links to be displayed to the left as well. Due to the title position, these links are automatically hidden when scrolling within a topic.

Jane_Macky · July 17, 2020, 3:00pm

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
Thanks!

rolando · October 11, 2020, 5:55pm

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

rolando · October 11, 2020, 5:57pm

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

bekircem · November 9, 2020, 6:05pm

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="https://marketplace.zoom.us/docs" target="_blank">Developer</a>
  <span class="caret"></span>
  <div class="dropdown-content">
    <a title="Zoom API Docs" href="https://marketplace.zoom.us/docs/api-reference/introduction" target="_blank">API</a>
    <a title="Zoom SDK Docs" href="https://marketplace.zoom.us/docs/sdk/native-sdks/introduction" target="_blank">SDK</a>
    <a title="Zoom Developer Blog" href="https://medium.com/zoom-developer-blog" target="_blank">Blog</a>
    <a title="Zoom Developer Changelog" href="https://marketplace.zoom.us/docs/changelog" target="_blank">Changelog</a>
    <a title="Zoom Developer Survey" href="https://docs.google.com/forms/d/e/1FAIpQLSeJPLhNuxjtkxyyV276R8S_nYz99fpMbbS8VWkC8Hwi7-2Byg/viewform" target="_blank">Survey</a>
  </div>
</div>

shréa · November 24, 2020, 10:34pm

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.

mekentosj · December 10, 2020, 9:55am

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.

sok777 · January 21, 2021, 10:36am

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

jrgong · January 30, 2021, 8:34pm

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

edgarriba · February 12, 2021, 6:42pm

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

pmusaraj · February 12, 2021, 8:10pm

Yes, the text color will use the currently selected color scheme.

edgarriba · February 12, 2021, 8:23pm

weird - because I get this

pmusaraj · February 12, 2021, 9:12pm

Here’s what I see on my local:

Can you make sure the component is updated?

Zup · March 28, 2021, 2:07am

how can the title convert **formatting code** into actual formatting? also how about Font Awesome icons before the text?

Alon1 · May 12, 2021, 10:30pm

Hi,

Thanks for this great theme component!

For registration-only / private Discourse communities, would it be possible to show the header links only to registered signed-in users?

omarfilip · May 12, 2021, 11:20pm

Yes, you can hide them via CSS for visitors who are not logged in:

html.anon .custom-header-links {
    display: none;
}

Alon1 · May 12, 2021, 11:27pm

Thanks, however CSS just hides it from view, the links are still available in the page source and so open to anyone, including search engine, crawlers, etc.
I was aiming for not showing those links at all, like you would have hidden topics in: