Customize the header with links, icons, or menus

[Discourse]

This guide is crafted for users who want to spruce up their site’s header by adding links, icons, or menus. Whether you’re using simple theme components or opting for more intricate customizations, this manual provides clear, step-by-step instructions to help you make the desired changes, no matter your level of technical know-how.

Required user level: Administrator

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. Custom Header Links (icons) creates clickable icons next to the magnifying glass
   

   

3. Brand Header 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 Beginner's guide to developing 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:

• Add a custom header with a dropdown menu

---

Last Reviewed by @SaraDev on 2022-05-24T20:00:00Z

Last edited by @olivia 2024-07-17T05:54:55Z

Last checked by @hugh 2024-08-02T11:06:04Z

Check document

Perform check on document: