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

support
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

6 Likes
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! Developer’s guide to Discourse Themes showed me enough to find the home-logo widget and fix it! You’re a genius, and an excellent teacher.

4 Likes