Custom Header Links

See Why are custom header links 'overridden'? and Links not appearing since the last theme component update

3 Likes

Just dropping a note here that I merged in a change today which migrates the custom_header_links theme setting to type: objects which we recently just released.

We don’t expect things to break with this migration but if they do, please drop a note here to let me know.

Hello,

it’s breaking.

Your change made my custom links disappear and replaced them with the default:

My old links are nowhere to be found.

This is the second time in 3 months that this component explodes - remembering DEV: Rename `Custom_header_links` settings to `custom_header_links` (… · discourse/discourse-custom-header-links@5006125 · GitHub

Is there a way for paying customer to opt-out from beta releases? it’s exhausting.

Thanks!

1 Like

Let me look into the missing links and see if there’s anything I can do. :+1:

Sorry if this is a newbie question - but I want header links on both the left and right side such that:
[Logo][Link1][Link2] <-----------------------Spacing------------------------->[Link3][Link4][Link5].

I created 2 separate custom header links, with one links position on the left and the other on the right. But I’ve learned that both won’t show up since it treats it as separate components. How would I go about this?

2 posts were split to a new topic: Custom Header Links not respecting ‘vdo’ setting

I want to create 2 links using the above component. Say link 1 and link 2. Link 1 will be displayed to logged-in users and link 2 will be displayed for anon users. How can I do that?

Hi, welcome!

You can’t do it directly with the component, but you can use CSS to hide links.
There is a .anon class you can rely on to determine whether a user is logged in.

For example, if your link names are “Link 1” and “Link 2”:

/* Logged-out users */
html.anon .link-1-custom-header-links {
    display: none;
}

/* Logged-in users */
html:not(.anon) .link-2-custom-header-links {
    display: none;
}

The HTML contains a class name where the link name is dasherized, followed by -custom-header-links. You can look at it in the browser console by right click on a link → inspect, you will see:

1 Like