Custom Header Links

Theme component
,
137

Hey @andreas_can welcome to Meta :wave:

This component adds a CSS class to each link based on its text. The class added is the same as the text you give the link except that spaces are replaced with a hyphen (-) and the text is set to lowercase. Then the string -custom-header-links is appended at the end.

So if you add a link with the text

privacy

then the link element will have the class

privacy-custom-header-links

If your link text is

Visit Shop

then the CSS class would be

visit-shop-custom-header-links

So, now you know the class added to each link. Going back to your question.

Discourse adds a CSS class to the <HTML> tag when the user is not logged in. That class is

anon

So, you can use that to hide certain links for users who are not logged in. Let’s say I have a link with the text

Customer Support

and I don’t want it to show to users who are not logged in.

I would then add this CSS

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

in the common > CSS tab of my main theme.

This will hide that particular link for users who are not logged in.

11 Likes