Add text to top navbar to the left of login/signup buttons

Product Support

AI-generated summary

The discussion is about adding text to the top navbar to the left of the login/signup buttons. pfaffman initially attempted to add a tagline to the top line, but encountered issues when users are not logged in. Johani suggested an alternative approach using a Discourse plugin to decorate the header-buttons widget, providing an example code snippet. This solution allows for more flexibility and control over the layout.

pfaffman found the solution helpful, but then needed to adjust the alignment of the text to be left-aligned with the logo. After exploring the Discourse documentation, pfaffman was able to find a solution by modifying the home-logo widget.

1

I’m trying to add a tagline to the top line to the right of the site logo, right justified up against the stuff at the right. My current solution works, but breaks if you’re not logged in.

header

<div id="top-navbar" class="contents clearfix">
<span id="top-navbar-links" display="none">
   <a href="https://company.com/" class="lc-menu" id="library"
  target="_blank">Name.</a> Powered by <a href=https://company.com/>company</a>.
</span>
</div>

desktop.scss

span#top-navbar-links {
    display:block !important;
    margin:22px 0 0 0;
    align-items: right;
}

div#top-navbar {
        max-width:none; /*remove max width*/
        width: auto; /*prevent other widths taking over*/
        z-index: 1040; /*stays on top of other header*/
        /*position:relative;
        float:left;*/
        position:fixed;
        top:0;
        right: 130px;
    }
2

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:

image
image1461×118 12.8 KB

3

That’s fantastic, @Johani. Thanks to your undying patience, I’m starting to understand those mysterious helper.h things. (I think I need to read up on Ember to understand those?).

But of course, now they want the text left aligned with the logo. :frowning:

EDIT: But wait! Developing Discourse Themes & Theme Components showed me enough to find the home-logo widget and fix it! You’re a genius, and an excellent teacher.