Best way to customize the header

The easy way (Theme Components)

Each theme component is different, so read the topics related to the various components before choosing the one that fits most to your site.

  1. Custom Header Links creates a menu inside the header, next to the magnifying glass

  2. Iconified Header Links creates clickable icons next to the magnifying glass

  3. Brand header theme component creates a menu above the header

  4. Header submenus creates a menu above the header with submenus

Each component can be further customized on a separate stylesheet so that when the components are updated your changes will not be overwritten. All you need to know is a bit of CSS and you can style your header as you prefer.

The advantage of these solutions is that all these components are managed, maintained, and updated by the Discourse team and they already work for mobile.

The hard way

Build your own customizations.

To do this you will need to read at least the Beginner's guide to using Discourse themes and the Developer’s guide to Discourse Themes.

Once you are familiar with the Discourse themes, you can start building yours.

Try it

Select the common or desktop tab and then add your custom HTML to the header tab . Customizing on mobile can be complicated if you are a new to HTML/CSS, so I personally recommend that you change your header only on desktop to start.

As example you can start to add the HTML part of your menu in the header tab

 <div id="top-navbar">
   <span id="top-navbar-links">
     <a href="http://example.com">Home</a>
     <a href="http://example.com/about/">About</a>
     <a href="http://example.com/news/">News</a>
     <a href="http://example.com/products/">Products</a>
     <a href="http://blog.example.com/blog">Blog</a>
     <a href="http://forums.example.com/">Forums</a> 
   </span>
 </div>

This will create your basic menu:

Now you can add the appropriate CSS to stylish the header.

Add your CSS in the CSS tab, eg

//Align the menu to the site logo
#top-navbar {
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    max-width: 1110px;
    //You can move the menu to the left, to the center or to the right
    text-align: center; 
}

And start to customize your menu:

#top-navbar-links a {
    font-size: larger;
    color: #CD0604;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 0 3px;
    margin-right: 10px;
    //and so on
}

Tips and tricks

Display your menu only to visitors (or only to logged in users)

You can display the menu only to non-registered visitors and hide it to your logged in users.
Just add this display: none; inside your CSS

#top-navbar {
    [...]
    display: none;
}

and add a new rule:

.anon #top-navbar {
    display: block;
}

You can do the opposite by reversing the rules of the display property:

#top-navbar {
    [...]
    display: block;
}
.anon #top-navbar {
    display: none;
}

In this way only users already logged in will see the menu

Display your menu only to members of a group

This will works only for primary groups!

body:not(.primary-group-GROUP-NAME) #top-navbar {
  display: none;
}

Change GROUP-NAME with the name of the group that will be able to see the menu.

Open links in an external tab

In your Html code add the property

target="_blank"

For example:

 <div id="top-navbar">
   <span id="top-navbar-links">
     <a href="http://example.com" target="_blank">Home</a>
     [...]
   </span>
 </div>

Remember that internal links are allowed (even using relative paths) and that they can be opened in external tabs too.

 <div id="top-navbar">
   <span id="top-navbar-links">
     [...]
     <a href="/c/site-feedback" target="_blank">Forums</a> 
   </span>
 </div>

Related topics:

16 Likes

Here’s the code that I’m using for the navigation on https://forum.bors.tech/. Similar code is also used on https://discourse.janitor.technology/. I based it off of the navigation on https://talk.commonmark.org, though their version is missing a few features.

CSS

/* =============== Bors-NG Header Menu CSS ================= */

/* The outermost wrapper */
#bors-navbar {
    z-index: 1040;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
/* is there a better way to detect PM pages and Topic pages from CSS? */
body[class*="archetype-"] #bors-navbar {
    position: absolute;
}
/* This inner wrapper makes sure the nav bar respects your forum's max width */
span#bors-top-links {
    display: block !important;
    margin: 5px auto 0 auto;
    max-width: 1110px;
}
/* The list of links itself */
.bors-nav-link-container li {
    display: inline-block;
    float: left;
}
/* <a> tags are links, while the <b> tag is the current page */
.bors-nav-link-container {
    display: block;
    overflow: hidden;
    margin-left: 160px;
    position: absolute;
}
.bors-nav-link-container a,
.bors-nav-link-container b {
    color: #333;
    text-decoration: none;
    text-align: center;
    line-height: 48px;
    font-size: 14px;
    padding: 1em 1.25em;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.bors-nav-link-container a:hover,
.bors-nav-link-container a:active,
.bors-nav-link-container a:focus {
    background: #333;
    color: #FFF;
}
/* small-screen mode */
@media screen and (max-width: 1024px) {
    /* the .js makes sure that "small-screen-mode" overrides "big-screen-mode */
    .js div#bors-navbar {
        position: static;
        margin-top: -1em;
        margin-bottom: 1em;
    }
    .bors-nav-link-container {
        position: static;
        margin-left: 0;
    }
}

After header

<div id="bors-navbar">
<span id="bors-top-links">
<ul class="bors-nav-link-container">
   <li><a href="//bors.tech" class="nav-link">Home</a></li>
   <li><b>Forum</b></li>
   <li><a href="//bors.tech/documentation/getting-started/" class="nav-link">Docs</a></li>
   <li><a href="//app.bors.tech" class="nav-link">Log into dashboard</a></li>
</ul></span>
</div>

18 Likes

I’ve been using this code for my own forum header for the last year or so, but it recently broke on mobile. Did anyone else notice the same issue? If so, did you already find a fix?

1 Like

I was able to fix it by moving the code from Common CSS/HTML into specifically Desktop CSS/HTML (I also changed the media query to just hide the bar instead of trying to reformat it, in smaller Desktop configurations). This does remove the menu entirely from mobile, but I figure we could use the space savings anyway…

1 Like

We’re having the same issue @tkrunning. i messed around with CSS for about 10mins, but tbh i think i’ll just install one of the plugins to save time.

@notriddle would you expand on how you fixed it, as it seems to be something a few of us who built our own headers are struggling with. I found it quite unresponsive to the usual fixes i’d use on a CSS issue. Then again i’m hardly a hobbyist.

It’s fairly easy to use an @media screen and (max-width: whatever) command to re position the menu. The problem i find is that the other elements seem to insist on ignoring it regardless of positioning. So i can’t make the topics move down to accommodate it, and have to use another @media screen and (max-width: ) to set a margin to prevent the + new topic button from overwriting it.

Basically the code is starting to look a bit silly, and i still haven’t been able to make the topics move down to give it space to move into - as it did before.

hold up (if anyone’s following). i’ve got it.

@tkrunning @notriddle

change:

.fl-nav-link-container {
    position: fixed;
    top: 0;
}

@media screen and (max-width: 1024px) {
    .fl-nav-link-container {
        position: relative;
        z-index:1040;
} 
}

#fl-navbar {
    position: relative;
}
@media screen and (max-width: 800px) {
    #fl-navbar {
        z-index: 999 !important;
    }
}

and it should work the same as before.
(obviously remove the ‘fl-’ from my code). I’m certain there is a cleaner solution, so if someone else wants to add it please do.

edit: that is working, but has a small bug on full screen with the header overlapping the buttons at times.