position: fixed is very troublesome in some ways because it’s pretty much blind to everything except the viewport.
Instead you can decorate the header-bottons widget with something like this in the header section on desktop (mobile has no space for this)
<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("header-buttons:before", helper => {
return helper.h("span.header-links", [
helper.h(
"a#library.lc-menu.custom-header-link",
{
href: "https://company.com/",
target: "_blank"
},
"Name."
),
helper.h("span.powered-by", "Powered by"),
helper.h(
"a.custom-header-link",
{
href: "https://company.com/"
},
"company"
)
]);
});
</script>
and a little bit of SCSS for padding and colors:
.header-links {
padding-right: 0.5em;
.powered-by {
padding: 0 0.25em;
color: foobar; // <-- change text color
}
.custom-header-link {
color: foobar; // <-- change link colors
}
}
that should be enough to create something like this:
