How to show header like your site like Talkyard Community forum

Hi Arjun, Yes, click your name menu (upper right corner), then click Admin, click Look and feel, then click HTML, then type something in the Header HTML textarea. This what I use:

<div id="topbar">
<div class="container">
  <div style="float:left">
  <a class="logo-slogan" href="/">
    <img src="https://...link-to-out-of-date-logo..."><span class="logo">Talkyard</span>
  </a>
  </div>
  <nav id="site-nav">
      <a href="/">Home</a>
      <a href="/forum/">Community</a>
      <a href="/about">About</a>
      <a href="/pricing">Pricing</a>
      <a href="/dev/-81n25/technical-information">For developers</a>
  </nav>
</div>
</div>

And then you'll want to add some CSS too, if you click JS and CSS to the left. I had a look, seems this is all (?) I've added:

#topbar>.container a {
    color: hsl(0, 0%, 83%);
    font-size: 15px;
}
#topbar .logo-slogan img {
    width: 40px;
    display: inline;
    margin: 0 10px 0 0;
    padding: 1px;
    vertical-align: middle;
    top: -2px;
    position: relative;
}
.logo {
  font-size: 18.7px;
  font-style: normal;
  font-weight: bold;
  vertical-align: middle;
}
.esActiveHeaderLink:not(.logo-slogan) {
    font-weight: bold;
    text-decoration: underline;
    cursor: default;
}

Maybe I forgot something. ... I'd like to make this more easy to customize, so people won't need to understand HTML and CSS. Maybe this'll include refactoring CSS class names, and maybe the CSS styling of your top header will then partly break — and I can add a note about notifying you about that in advance, so hopefully we can avoid that.