# Add button to top menu

**URL:** https://meta.discourse.org/t/add-button-to-top-menu/78366
**Category:** Development
**Created:** [January 18, 2018, 1:45pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366 "2018-01-18T13:45:48Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![PatrickH](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickh/32/116296_2.png) [@PatrickH](https://meta.discourse.org/u/PatrickH)
#### Post date: [January 18, 2018, 1:45pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/1 "2018-01-18T13:45:48Z")

</div>

I want to add a button (with a different color) to the top menu, and if possible align right  
How can i do this ?

---

<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: [January 18, 2018, 1:52pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/2 "2018-01-18T13:52:21Z")

</div>

> [@(Superseded) Add new link on header beside search icon](https://meta.discourse.org/t/add-new-link-on-header-beside-search-icon/48621):
>
> mega This feature is now available as a [dedicated theme component](https://meta.discourse.org/t/iconified-header-links/86307). Want to add a new link right next to search icon on header? Follow below steps: Add this JavaScript code to your site theme Go to Admin Customize Themes Select the theme you wish to customize Edit CSS/HTML \</head\> \<script type="text/discourse-plugin" version="0.4"\> const { iconNode } = require("discourse-common/lib/icon-library"); api.decorateWidget('header-icons:before', helper =\> { return helper.h('li', [ he…

---

<div class="post-metadata">

### Author: ![PatrickH](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickh/32/116296_2.png) [@PatrickH](https://meta.discourse.org/u/PatrickH)
#### Post date: [January 18, 2018, 2:03pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/3 "2018-01-18T14:03:45Z")

</div>

Almost, but i want to have this button: Premium

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

---

<div class="post-metadata">

### Author: ![SidV](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sidv/32/119460_2.png) [@SidV](https://meta.discourse.org/u/SidV)
#### Post date: [January 18, 2018, 2:28pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/4 "2018-01-18T14:28:35Z")

</div>

Check here: [(Superseded) Add header menu links](https://meta.discourse.org/t/how-to-add-header-menu-links/29563)

---

<div class="post-metadata">

### Author: ![PatrickH](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickh/32/116296_2.png) [@PatrickH](https://meta.discourse.org/u/PatrickH)
#### Post date: [January 18, 2018, 2:35pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/5 "2018-01-18T14:35:19Z")

</div>

check, did this but there is no button …

---

<div class="post-metadata">

### Author: ![bts](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bts/32/184556_2.png) [@bts](https://meta.discourse.org/u/bts)
#### Post date: [January 18, 2018, 3:52pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/6 "2018-01-18T15:52:22Z")

</div>

You’ll have to customize a bit with HTML / CSS to get exactly the look you’re going for. If you have a reference button you want to copy you can often get most of the way there by inspecting using something like Chrome web tools and copying existing styles. Lots of tutorials you can follow + modify as well! Definitely a bit of a learning curve but imo fun to figure out how this stuff works 🙂

---

<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: [January 18, 2018, 3:57pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/7 "2018-01-18T15:57:03Z")

</div>

Screenshots would be really helpful. It is hard to tell if your theme component is just not active or if you put the code in the wrong place.

---

<div class="post-metadata">

### Author: ![HAWK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hawk/32/86627_2.png) [@HAWK](https://meta.discourse.org/u/HAWK)
#### Post date: [January 18, 2018, 5:07pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/8 "2018-01-18T17:07:31Z")

</div>

Show us what you’ve got so far and we’ll help you tweak it. We’re flying blind a bit here…

---

<div class="post-metadata">

### Author: ![PatrickH](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickh/32/116296_2.png) [@PatrickH](https://meta.discourse.org/u/PatrickH)
#### Post date: [January 18, 2018, 6:11pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/9 "2018-01-18T18:11:18Z")

</div>

this is the forum: [https://forum.webwinkelcommunity.nl/](https://forum.webwinkelcommunity.nl/)  
and instead of the blue arrow icon I want a button with Premium (or Donateur)

---

<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: [January 19, 2018, 12:19am UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/10 "2018-01-19T00:19:16Z")

</div>

Try changing the following

```plaintext
    api.decorateWidget('header-icons:before', function (helper) {
        return helper.h('li', [helper.h('a#home-button.icon', {
            href: 'https://forum.webwinkelcommunity.nl/t/wordt-donateur/2171/1',
            title: 'Wordt Donateur'
        }, helper.h('i.fa.fa-arrow-circle-up.home-button-icon.d-icon'))]);
    });

```

to

```plaintext
    api.decorateWidget('header-icons:before', function (helper) {
        return helper.h('li', [helper.h('a#home-button', {
            href: 'https://forum.webwinkelcommunity.nl/t/wordt-donateur/2171/1',
            title: 'Wordt Donateur',
            text: 'Wordt Donateur'
        })]);
    });

```

With the following CSS

```plaintext
a#home-button {
    border: 1px solid #000;
    padding: 5px;
    border-radius: 3px;
    position: relative;
    display: block;
    margin-top: 5px;
}

```

Screenshot:  
 ![image](https://global.discourse-cdn.com/meta/original/3X/2/5/25553cd1e1f6fd3d7ac903e6902b2dfb0be5cefc.png)

---

<div class="post-metadata">

### Author: ![TerminalAddict](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/terminaladdict/32/119676_2.png) [@TerminalAddict](https://meta.discourse.org/u/TerminalAddict)
#### Post date: [January 19, 2018, 3:02am UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/11 "2018-01-19T03:02:05Z")

</div>

This should do it: ( demo: [https://www.mcrides.co.nz](https://www.mcrides.co.nz) I have a “Weather” link )  
You’ll need to style it with css.  
customize-\>theme-\>\</body

```
<script>

  Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href')
  });

  I18n.translations.en.js.filters.premium = { title: "Premium", help: "Premium account" };

  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
      var list = this._super(category, args);
      if(!category) {
        list.push(Discourse.ExternalNavItem.create({href: '/my/link.html', name: 'premium'}));
      }
      return list;
    }
  });

 </script>

```

---

<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: [January 19, 2018, 3:03am UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/12 "2018-01-19T03:03:41Z")

</div>

But that adds it to the Navigation, not the header…

But I guess it isn’t obvious which he wants, as his initial posts says “top menu” which refers to the navigation, but his screenshot and example of where his icon is… is in the header.

---

<div class="post-metadata">

### Author: ![TerminalAddict](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/terminaladdict/32/119676_2.png) [@TerminalAddict](https://meta.discourse.org/u/TerminalAddict)
#### Post date: [January 19, 2018, 3:04am UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/13 "2018-01-19T03:04:41Z")

</div>

My example adds to header menu, not to navigation

---

<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: [January 19, 2018, 3:06am UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/14 "2018-01-19T03:06:06Z")

</div>

You are opening the NavItem class and your Weather example is on the navigation…

---

<div class="post-metadata">

### Author: ![TerminalAddict](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/terminaladdict/32/119676_2.png) [@TerminalAddict](https://meta.discourse.org/u/TerminalAddict)
#### Post date: [January 19, 2018, 3:09am UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/15 "2018-01-19T03:09:29Z")

</div>

oh 😊

Maybe he wants

```
<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    return [
            helper.h('li', [
            helper.h('a#premium-button.icon', {
                href: '/link.html',
                title: 'Premium Content'
            }, helper.h('i.fa.fa-cloud.premium-button-icon.d-icon')),
        ])
    ];
});
</script>

```

---

<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: [January 19, 2018, 3:10am UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/16 "2018-01-19T03:10:46Z")

</div>

Close, that is almost what he has now, I provided code that puts text there and makes it more “button-ish” (just a few posts up) 😉 So now he has both … one of the two should do what he wants.

---

<div class="post-metadata">

### Author: ![PatrickH](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickh/32/116296_2.png) [@PatrickH](https://meta.discourse.org/u/PatrickH)
#### Post date: [January 19, 2018, 6:57am UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/17 "2018-01-19T06:57:20Z")

</div>

Great @cpradio that works, many thanks!

---

<div class="post-metadata">

### Author: ![Hossein\_Amerkashi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hossein_amerkashi/32/89092_2.png) [@Hossein\_Amerkashi](https://meta.discourse.org/u/Hossein_Amerkashi)
#### Post date: [January 25, 2018, 12:54pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/18 "2018-01-25T12:54:46Z")

</div>

Hi,

1. How and where do you add the icons? I like to use external icons instead of fa
2. I’m trying to open an external link. Is there a way to add a target so that we use a different window?

Thanks

---

<div class="post-metadata">

### Author: ![Jane\_Macky](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jane_macky/32/141024_2.png) [@Jane\_Macky](https://meta.discourse.org/u/Jane_Macky)
#### Post date: [July 17, 2020, 3:03pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/19 "2020-07-17T15:03:42Z")

</div>

I’m trying to achieve the same outcome Header Menu Link - text in button. I used the component from here: [Custom Header Links - #66](https://meta.discourse.org/t/custom-header-links/90588/66)  
Am not sure how to work with the component to customize based on this thread, any tips?

---

<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:36pm UTC](https://meta.discourse.org/t/add-button-to-top-menu/78366/20 "2024-06-08T12:36:59Z")

</div>

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