Custom Header Links

[matenauta]

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

[AndreasZhou (Andreas)]

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?

[quimgil]

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 ).

[simon]

@quimgil

Is “vdo” working properly for anyone reading this?

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.

[quimgil]

@simon

?mobile_view=1

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.

[AntiMetaman]

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:

Custom header with dropdown navigation

I recently made a dropdown navigation menu for Envato’s new forums, so I’ll share some code to implement something similar on your own site. We’ll be implementing a black header with one link that reveals a menu of more links, like this: [image] In Admin > Customize > CSS/HTML, create a new customization. Remember that you can have multiple customizations active at the same time, so it’s a good idea to use many of them instead of one giant one for everything. For this custom header, create a…

[tjot (Tomasz)]

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.

[Nick_Chomey]

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).

[Dax (Daniela)]

@Nick_Chomey

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

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

E.g.:

• Default order
  

  

• Custom order
  

  

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;
  }
}

[keegan (Keegan George)]

@Nick_Chomey

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

@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:

[Feature Request] Ability to adjust order of list type settings

Background Adding a list type settings to a Discourse theme/plugin is nice and convenient with: custom_setting: type: list list_type: simple description: en: "my description." However, I’ve often found that whenever I create these types of settings, at one point or another I end up needing to adjust the order of the items. I usually either use flexbox’s order property to resolve this or manually edit the settings. I was reminded about this with @Nick_Chomey comment on the Custom He…

[Nick_Chomey]

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

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

[hrayner (Harley Rayner)]

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

[andreas_can (Andreas)]

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.

[Johani (Joe)]

Hey @andreas_can welcome to Meta

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.

@andreas_can

Is it possible to have a link only be visible if the user is logged in?

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.

[andreas_can (Andreas)]

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

I’ll give it a go

[Alon1 (Alon)]

@andreas_can

This is exactly what I was looking for.

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.

[awesomerobot (Kris)]

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.

[Moin]

The preview does not work

[awesomerobot (Kris)]

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

[Southpaw]

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!