Custom Header Links

Could be possible to add a flag to show or hide links as specific groups of users?

3 Likes

Great component thanks! I am new and this is the first component I installed myself. Due to its simplicity even I got it to work and I am well proud of myself.
One more question I couldnt find the answer for despite a lot of searching on the Forum:

Is there a way to make the text in the header bold and/or change the font used for the header?

2 Likes

Hi, we are using “vdo” in our three links, and yet they show up in the mobile version (where they break the UI due to forcing a too wide width).

Is “vdo” working properly for anyone reading this?

We are running 2.8.0.beta6 ( eed3773b97 ).

1 Like

I have just tested this on the latest Discourse code, using the link examples that are supplied when the theme component is first installed:

  • External link, this link will open in a new tab, https://meta.discourse.org, vdo, blank, remove
  • Most Liked, Posts with the most amount of likes, /latest/?order=op_likes, vdo, self, keep
  • Privacy, Our Privacy Policy, /privacy, vdm, self, keep

When I force my site to enter mobile mode by loading it with the ?mobile_view=1 query parameter, the first two links (set to vdo) are correctly removed from the header and only the final vdm link is displayed.

4 Likes

Thank you for testing. When using this parameter on a desktop browser I obtain correct results, both with our custom links and with the defaults.

However, have you tested on an actual mobile device? With Firefox on an Android mobile phone I can see the default and the custom links (desktop mode being disabled). The rest of the Discourse UI is the usual mobile UI.

(If I type the ?mobile_view=1 parameter manually in the mobile browser URL then the links follow vdo.)

EDIT: I have tested with Chrome mobile as well, and there it works correctly. I’m confused, but a bit relieved. :slight_smile:

3 Likes

Is there a way this theme component can allow for dropdown navigation? That means, when I hover over a header link, it has sub-items that appear underneath it. I know that this can be done via html/css as shown here:

2 Likes

Thank you for creating this component!
One question and potentially a feature request: can we show a specific link for a specific group?
For example, if a user is in group customers I’d like to show a link to the customer’s control panel, if a user is in group workers I’d like to add a link to a different panel.
I think this would be a very useful feature.
The group name could be the last (optional) parameter.

2 Likes

Thanks for this! I just found it after trying various other banners and components. Its exactly what I need!

One request/suggestion: ability to re-order the links. I just made a bunch and realized I’d like to add one at the top. Now I’ll have to manually copy and paste them all, which is actually quite cumbersome as they keep syncing/updating other entries as I copy them down.

Drag and drop or up/down buttons would be very useful for future users (or future edits).

3 Likes

You can already manipulate the order very easily with some lines of CSS since we use the flex property.

E.g.:

CSS example:

.custom-header-links li {
  &:nth-child(1) {
    order: 3;
    background: red;
  }

  &:nth-child(2) {
    order: 1;
    background: green;
  }

  &:nth-child(3) {
    order: 2;
    background: yellow;
  }
}
5 Likes

@Nick_Chomey I’ve often found myself needing to do this, not only for this theme component but many other theme components that use the type: list setting. I was planning on submitting a feature request before, but I completely forgot, but since you’ve reminded me, I’ve added one here:

3 Likes

@Dax Thanks! I had no idea this was possible!

@keegan looks great, hopefully itll get added at some point!

2 Likes

I’m looking for the same solution, did you find out how they did this yet?
Thanks!

1 Like

Hi @Johani
Thanks for creating such an awesome component!

Is it possible to have a link only be visible if the user is logged in?
It will be an external link.

1 Like

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.

8 Likes

Thank you for such a quick and thorough reply!
This is exactly what I was looking for.

I’ll give it a go :slightly_smiling_face:

3 Likes

Note that CSS display: none; only hides the link from browser rendering but it is always fully visible to anyone looking at the page source, to web crawlers and search engines.

3 Likes

This is generally true, CSS isn’t a secure way to hide anything because a savvy person might look at the page source for whatever reason… but we do serve a no-js view to crawlers, so in that case content added by themes usually isn’t indexed anyway.

3 Likes

The preview does not work

3 Likes

I’ve updated the preview link, it should work now!

3 Likes

Is it possible to use this component to call a javascript with
javascript:script('function');
instead of an actual url?

(It seems to almost work, but I’m hitting CSP violations.)


Edited to add:
I got it to work. If anyone else should ever wonder, I used # in the component’s UI in place of a url, then used an event listener to call the javascript function.

Others likely know a better way, and I hope they’ll share that knowledge if they do!

2 Likes