# Adding links to Discourse header

**URL:** https://meta.discourse.org/t/adding-links-to-discourse-header/47830
**Category:** Support
**Created:** [July 26, 2016, 6:31pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830 "2016-07-26T18:31:56Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![jamesmarkcook](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesmarkcook/32/168563_2.png) [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)
#### Post date: [July 26, 2016, 6:31pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/1 "2016-07-26T18:31:56Z")

</div>

I noticed that the [Sitepoint forums](https://www.sitepoint.com/community/) have links within the Discourse header itself.

How was this achieved? I came across a post that suggested adding links above the header and then using CSS to position them so it looks like they’re part of the Discourse header. I’d prefer not to do it this way but to add markup directly in the normal header if possible.

I was thinking a plugin, but I can only add markup where a plugin outlet exists right?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [July 26, 2016, 6:34pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/2 "2016-07-26T18:34:34Z")

</div>

We use a plugin where we override the entire header template.

Specifically

> <https://github.com/sitepoint/discourse-theme/blob/master/assets/javascripts/discourse/templates/header.hbs>

---

<div class="post-metadata">

### Author: ![mikechristopher](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikechristopher/32/89135_2.png) [@mikechristopher](https://meta.discourse.org/u/mikechristopher)
#### Post date: [July 26, 2016, 6:38pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/3 "2016-07-26T18:38:37Z")

</div>

Was it this one you meant @jamesmarkcook. This is the one we use and works quite well

> [@(Superseded) Add header menu links](https://meta.discourse.org/t/how-to-add-header-menu-links/29563):
>
> This tutorial has been superseded by a theme component courtesy of @Johani. play_button outdated tutorial

---

<div class="post-metadata">

### Author: ![jamesmarkcook](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesmarkcook/32/168563_2.png) [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)
#### Post date: [July 26, 2016, 6:43pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/4 "2016-07-26T18:43:31Z")

</div>

Thanks very much for the heads up. I’ll adapt this for my needs 👍

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [July 26, 2016, 6:44pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/5 "2016-07-26T18:44:24Z")

</div>

Just be warned, it makes upgrading a chore from time to time, as you are in charge of your header entirely and you can break it. So unless you have a staging server that you can test against for upgrades, I’d find a different route.

---

<div class="post-metadata">

### Author: ![jamesmarkcook](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesmarkcook/32/168563_2.png) [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)
#### Post date: [July 26, 2016, 6:48pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/6 "2016-07-26T18:48:27Z")

</div>

Ok thanks for the warning. I’ll have a think 🤔

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [July 26, 2016, 6:54pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/7 "2016-07-26T18:54:30Z")

</div>

Feverbee also has header links that I helped them out with, they are using this code:

```plaintext
<script type="text/discourse-plugin" version="0.2">
api.decorateWidget('home-logo:after', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('ul.nav-link-container', [
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://www.feverbee.com/resources', 
                        text:'RESOURCES',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://experts.feverbee.com/', 
                        text:'DISCUSSIONS',
                        target:'_self'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://sprint.feverbee.com/', 
                        text:'EVENTS',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://ondemand.feverbee.com/', 
                        text:'TRAINING',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com/consultancy', 
                        text:'CONSULTANCY',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com/about-us', 
                        text:'ABOUT',
                        target:'_blank'
                    })
                ]),
                helper.h('li', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com', 
                        text:'HOME',
                        target:'_self'
                    })
                ])
            ]);
        }
});
</script>

```

With CSS to taste.

```plaintext
@import "theme_variables";

// header stripe shadow
.d-header {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
padding-bottom: 3px;
border-bottom: 1px solid #D45000;
}

.badge-wrapper.box span.badge-category {
    padding: 0 6px 2px;
}

// header links
.mobile-view .hidden-for-mobile { 
    display: none; 
}
.add-header-links {
    margin-left: 0 !important;
}

@media screen and (max-width: 940px) {
    .nav-link-container li:nth-child(1) {
        display: none;
    }
}
@media screen and (max-width: 830px) {
    .nav-link-container li:nth-child(2) {
        display: none;
    }
}
@media screen and (max-width: 743px) {
    .nav-link-container li:nth-child(3) {
        display: none;
    }
}
@media screen and (max-width: 650px) {
    .nav-link-container li:nth-child(4) {
        display: none;
    }
}
@media screen and (max-width: 525px) {
    .nav-link-container li:nth-child(5) {
        display: none;
    }
}

.nav-link-container {
    display: inline;
    li { 
        display: inline-block;
        float: right;
        a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            text-align: center;
            font-family: 'Open Sans'; 
            line-height: 48px;
            min-width: 90px;
            font-size: 15px;
            padding: 0 1em;
        }
    }
}

```

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [July 26, 2016, 6:55pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/8 "2016-07-26T18:55:13Z")

</div>

this one works well as well:

> [@Adding header links post vdom upgrade](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284):
>
> So, post-vdom’ing of the header, this old code: \<script type='text/x-handlebars' data-template-name='/connectors/header-after-home-logo/add-header-links'\> {{#unless showExtraInfo}} \<a id="recruiter" href="http://sih.onemadogre.com/t/joining-sih/494"\>Join us!\</a\> \<a id="about" href="http://sih.onemadogre.com/c/guild-news-announcements/about-the-guild"\>About SiH\</a\> {{/unless}} \</script\> doesn’t work, so I’ve replaced it with: note: this code works fine as of, like, early May? anyway my…

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [July 26, 2016, 7:37pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/9 "2016-07-26T19:37:12Z")

</div>

in the FeverBee site the links go into a drop-down menu as the screen gets smaller. i tried these codes and couldn’t produce it. do you know how i can produce it?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [July 26, 2016, 8:45pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/10 "2016-07-26T20:45:08Z")

</div>

I haven’t a clue to what you are referring to… can you explain what it is they are doing in a way I can reproduce it and see it? As When I shrink the window on desktop, it isn’t doing anything for me.

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [July 27, 2016, 5:29am UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/11 "2016-07-27T05:29:04Z")

</div>

here is the page header in the large scale:

 ![](https://global.discourse-cdn.com/meta/original/3X/e/9/e9b345b0c46bf7879512a27e7efdbfe4595652d4.png)

here is the header when i resize the page (you can see the 3-lines menu in the right):

 ![](https://global.discourse-cdn.com/meta/original/3X/4/e/4edb6c283b89d6b9fdfa8ec8d9df3e3de1270f00.png) 

and here is the image when you click on this three-line menu:

 ![](https://global.discourse-cdn.com/meta/original/3X/9/e/9e839f7e5d6dd8e8ae46be17cbbc2e47ba42acdf.png)

the links has gone into this menu. i hope i could explain what i meant. when i used the above codes, after i shrink the window the header becomes little bit noisy (as a result of no-space condition):

 ![](https://global.discourse-cdn.com/meta/original/3X/e/b/eb2f081c77cf9e23b24c1a1eb60024bfaffe0b86.png)

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [July 27, 2016, 10:26am UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/12 "2016-07-27T10:26:35Z")

</div>

> [@Pad\_Pors](#):
>
> the links has gone into this menu. i hope i could explain what i meant. when i used the above codes, after i shrink the window the header becomes little bit noisy (as a result of no-space condition):

That’s their main website and not Discourse though. The code I helped them with was for Discourse only, which doesn’t scale down to that menu either.

In short, you would need minimally add more HTML. You would have to have a menu (that is hidden at larger viewports) plus the horizontal menu which is visible at larger viewports. Then as the viewport shrinks your CSS media queries should hide the horizontal menu and make the menu visible.

This is a good read of the concept behind what their main site is doing

> **[Responsive Menu Concepts | CSS-Tricks](https://css-tricks.com/responsive-menu-concepts/)**
>
> Tim Pietrusky shares a number of different techniques for handling menus on smaller screens when the large screen version, unaltered, is untenable on the small screen.

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [July 27, 2016, 1:01pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/13 "2016-07-27T13:01:32Z")

</div>

many thanks for the good link 😃

---

<div class="post-metadata">

### Author: ![jamesmarkcook](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesmarkcook/32/168563_2.png) [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)
#### Post date: [September 13, 2016, 8:48am UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/14 "2016-09-13T08:48:42Z")

</div>

Have you noticed issues with older versions of Safari not displaying the link text?

If so, are you aware of any workarounds?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [September 13, 2016, 11:20am UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/15 "2016-09-13T11:20:51Z")

</div>

> [@jamesmarkcook](#):
>
> Have you noticed issues with older versions of Safari not displaying the link text?

I unfortunately do not have any old versions of safari laying around. So I can’t say that I have. Though I can’t think of any reason for that to occur, The HTML it outputs isn’t anything special and utilizes CSS 1 standard properties.

However, if you used that code as written, pay close attention to the “hidden-for-mobile” class, maybe it is being treated as mobile?

---

<div class="post-metadata">

### Author: ![jamesmarkcook](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesmarkcook/32/168563_2.png) [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)
#### Post date: [September 13, 2016, 1:17pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/16 "2016-09-13T13:17:48Z")

</div>

Thanks for the reply.

The links are definitely being inserted, but the text attribute is being ignored, or not inserted for some reason.

## Safari

![](https://global.discourse-cdn.com/meta/original/3X/c/7/c771865665bcfb6db76b97bc45de7200e2524e3f.png)

## Chrome

![](https://global.discourse-cdn.com/meta/original/3X/e/5/e52aeade6244dd1a90c82a39b06f00a25f667371.png)

I’m don’t really have much knowledge around Ember and wasn’t sure if this _was_ an Ember issue or a Discourse issue.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [September 13, 2016, 1:46pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/17 "2016-09-13T13:46:56Z")

</div>

If you have a way to recreate it, can you debug it? I’m thinking this is the location

> <https://github.com/discourse/discourse/blob/be3a5a56ccc284b352aa65080fc6b955f73cc72a/vendor/assets/javascripts/virtual-dom.js#L874-L889>

`text` would be the propname you want to stop the debugger on. I wonder if trying to set it via `element['text'] = value` is not happy with the older version of safari.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 8, 2024, 12:45pm UTC](https://meta.discourse.org/t/adding-links-to-discourse-header/47830/18 "2024-06-08T12:45:18Z")

</div>

This topic was automatically closed after 2873 days. New replies are no longer allowed.