Oh yes. That was my problem. Thank you for pointing out.
in svg icon subset you add the name of the fontawesome icon you’re looking for and then in the menu where you add the buttons in the header you use the same syntax. for the user icon you just need to write “user” for example.
I was able to make the links open to a new tab with this script. Just add the following script to the “Head” section.
<script>
document.addEventListener("DOMContentLoaded", function() {
const links = document.querySelectorAll(".custom-header-link.with-url");
links.forEach(link => {
link.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
const titles = {
"Documentation": "Enter URL Here",
"Downloads": "Enter URL Here",
"Source Code": "Enter URL Here",
"Dev Portal": "Enter URL Here",
"Slack Channel": "Enter URL Here"
};
const url = titles[this.getAttribute("title")];
if (url) {
window.open(url, '_blank');
}
});
link.setAttribute("href", "#");
});
});
</script>
I hope this helps!
Is it possible to have a different view when the site title is minimized and the topic title of the current topic is shown (when scrolling down a topic)?
I noticed that the Dropdown Header still looks great and makes a lot of sense on wide screens, but it does not on small screens. So doing a display: none would be useful and it is already done so on desktop when max-width: 712px.
Thanks and many greetings. 
2 Likes
Is there a way to only show the dropdown header in mobile?
I’ve tried to following:
/* Default styles - hide the header-buttons */
.header-buttons {
display: none;
visibility: hidden;
}
/* Media query for mobile devices */
@media screen and (max-width: 767px) {
.header-buttons {
display: inline; /* or display: inline-block; depending on your layout */
visibility: visible;
}
}
Which works, but anything else that is in the header (for example GitHub - discourse/discourse-header-search ) is still shrunken as if the dropdown header is still there…
What am i missing?
Thanks
1 Like
Likely, your customization is overwritten.
You don’t need visibility – you can do:
.header-buttons {
display: none !important;
}
2 Likes
Query about using the security functions:
If you’re using this function, is it possible to have more than one security group with access to a menu?
Our example: we run multiple educations programs (with multiple years/class groups for each program), each class group has its own security group so we can give them access to the right educational resources (without them accessing resources meant for another program/class year), with each year group having a unique Category for their class.
I need to create menus to let each class access their category, but I also need to let our education team (not in the security group for the students) into those spaces.
At the moment the only two solutions I can see:
- create a security group combining the staff and each class (annoying because I’d like less complications about security groups, not more)
- duplicate menus, so there’s one for the student group, and one for the staff group
Neither of these seems great.
Next question: What about adding security features to the sub-menu items?
(for my example: this would mean I could have one menu for all of the various course/class groups, and then only show students the applicable sub-menu items. Whereas at the moment I’ve got about 5-6 top menus to manage)
1 Like
I’d encourage you to look for alternatives to this Theme Component, as it doesn’t fit your use-case.
Can I suggest instead that you simply put the class categories into the default_navigation_menu_categories site setting?
As an admin, you’ll see them all (although you can personalise that view), but your class members and staff should only have those they have access to on the sidebar.
If I understand your problem correctly, this would work quite nicely for you.
2 Likes
Hey Nathan,
We’ve setup our categories. But we’d also like a menu at the top of the page. User’s are familiar with top menus - and communities are a hard enough learning curve (we aren’t here to create a whole new tech universe for our students).
It also doesn’t work because we need to be able to link to external sites from the menu (especially our SharePoint sites, in use because Discourse doesn’t include a structured library), and categories just don’t do that.
Honestly, being able to allow multiple security groups to view a menu (in the same way that we allow multiple security groups into a category) would just be easier. But if it’s not possible, then we’ll have to figure something else out.
1 Like
@merefield Height of the login buttons are affected by the dropdown header
This is only an issue if right is used for links position.
2 Likes
I’m no longer maintaining this so marked it as unmaintained
However, feel free to PR and I will review a PR. If you don’t personally have the time or skills but wish someone to fix it and have budget, consider posting in marketplace
4 Likes
It is causing me a problem too. I’ve taken a look, but it is too complex for my basic CSS hacks unfortunately.
3 Likes
I made a PR to modernize the component. (sponsored by @davidkingham) 
Along the way, it fixes a few UX issues that I noticed.
The component could use further improvement. I might PR another time. Here are a few ones I noted:
- Replace
json_schemasetting type withobjectstype - Add an option to open a link in a new tab
- Better accessibility
10 Likes
Thanks @Arkshine - brilliant work!
4 Likes
I’m seeing this fatal error on a site using this theme component 
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'trim')
at get source (custom-icon.gjs:20:24)
...
3 Likes
Oh. I made a PR to fix the issue; thanks for reporting!
Merged!
7 Likes