Hi, I’d like to adjust the font style and size of the header links. Can someone please point me to the correct CSS that allows me to do this? Thanks!
2 Likes
Hey @brentoshiro, the properties will vary depending on what you need styled, but the way you would select the links would be like so:
To style all header links:
.custom-header-links .headerLink a {
font-size: 1rem; // replace with your font size of choice
color: #96b67b; // can also use variables such as var(--tertiary);
font-style: italic; // options: normal, italic, oblique
}
To style a specific link
You can access the link either using the link title (separated by dashes and lower case) like so for “Privacy”:
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
color: red;
}
or by using the title attribute and entering the link title:
.custom-header-links .headerLink a[title='Our Privacy Policy'] {
color: purple;
}
To add styles on hover, you simple add :hover after the a tag:
.custom-header-links .headerLink a:hover {
color: var(--primary-low);
}
2 Likes
Hello, could it be possible to style the links to be centered instead of just left/right?
1 Like
This is really cool. I’m wondering how much additional work this would be to allow for different lists of header links per-group? We have staff and students on our site and would love to be able to provide different primary links in the header for each group.
3 Likes
You could achieve that by having each group on a different Theme, with each theme using its own copy of this Theme Component.
This would work nicely if one of your two groups was quite static (or at least smaller) - your staff group seems ideal for that. Or at least if you only had one dynamic group.
You then make the student links the site default Theme, and the make your staff members have the staff links manually (either by the UI or via the Rails Console).
6 Likes
I was just coming here to ask this as I finally noticed they appear on the log in screen
In my case, one of the links is changed every month (while the header name remains the same). Is it possible to hide the header with a code without having to edit to hide the link? For example using your example I would have
Customer Support
2022-customer-support/26903 is what my link is, then customer-support-july, etc.
So as you can see hiding customer-support-june would works fine, but it has to be updated monthly instead of if I was just hiding “FAQ” (and I also can’t add the /26903 from the topic to the CSS code so I can’t hide this specific link although I can possibly get around this by publishing the page?). If there’s no other way to do it this isn’t a big deal at all that’s not any amount of effort, it’s more that I guarantee I’ll forget.
2 Likes
hello, i was curious to know if it was possible to get possibly translations for the text ? Maybe by including translation keys, if the componant includes them 
1 Like
****Any reason why by default it’s not showing to non-logged in users?
Ignore, for some reason when I apply a component to the Theme, it doesn’t appear. I have to add the component onto the Theme instead.
1 Like
Using UTF-8 icons
Note that you can use UTF-8 icons as link anchors.
In this case, you might want to try this CSS to match other header dropdown icons:
.custom-header-links .headerLink {
margin-top: -1px;
}
.custom-header-links .headerLink a {
padding: 3px 10px;
color: var(--primary-low-mid);
font-size: var(--font-up-5);
font-weight: bold;
}
.custom-header-links .headerLink:hover {
background-color: var(--primary-low);
}
.custom-header-links .headerLink:hover a {
color: var(--primary-medium);
}
It does something like that:
1 Like
I just installed this component and added some links, but they weren’t displayed.
I discovered that entering a language prevents the links from displaying on my site. Originally I’d added ‘blank’ for completeness even though it wasn’t needed. They still didn’t display when I changed blank to ‘en’. Removing the value completely fixed the problem in my case. Haven’t a clue why, but I thought I’d mention this in case anyone else has a similar problem.
2 Likes
I fell afoul of that myself the other day too:
I’ll see if we can perhaps change the default examples to make it more intuitive.
2 Likes
I’ve removed the locale from the default settings here: UX: remove locale from default settings by awesomerobot · Pull Request #38 · discourse/discourse-custom-header-links · GitHub
So the defaults should now appear no matter which locale the site is set to. Thanks @packman and @JammyDodger!
2 Likes
My links are disappearred after last upgrade (PC, ubuntu, brave)
Could you check this?
@cmdntd – see the spinoff topic. You probably have a Discourse upgrade available under Admin | Upgrade that will resolve this.
1 Like
Recently my custom link has been replaced by the three default links. In preview, it works.
This is a hosted site, It has just occurred to me that something may have changed in the theme, so that it isn’t recognised by custom header links. I’ll check that out and report back.
Quack! I previewed the plugin in different themes and they all worked. I logged out and it worked. I switched browsers and it worked. There’s a strong smell of Schrödinger’s cat here.
1 Like
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. 