# Add button in header for logged in users

**URL:** https://meta.discourse.org/t/add-button-in-header-for-logged-in-users/276704
**Category:** Development
**Created:** [August 25, 2023, 11:18pm UTC](https://meta.discourse.org/t/add-button-in-header-for-logged-in-users/276704 "2023-08-25T23:18:17Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Sami\_Syed](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sami_syed/32/93193_2.png) [@Sami\_Syed](https://meta.discourse.org/u/Sami_Syed)
#### Post date: [August 25, 2023, 11:18pm UTC](https://meta.discourse.org/t/add-button-in-header-for-logged-in-users/276704/1 "2023-08-25T23:18:18Z")

</div>

How can I add a button to the header for logged-in users only. I would need to add custom text and link for this button.

---

<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: [August 26, 2023, 5:32am UTC](https://meta.discourse.org/t/add-button-in-header-for-logged-in-users/276704/2 "2023-08-26T05:32:18Z")

</div>

Have you had a search of the #Customization > Theme component category to see if something already exists that would fit your needs?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 26, 2023, 5:56am UTC](https://meta.discourse.org/t/add-button-in-header-for-logged-in-users/276704/3 "2023-08-26T05:56:54Z")

</div>

> [@Custom Header Links (icons)](https://meta.discourse.org/t/custom-header-links-icons/86307):
>
> discourse2Summary Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-header-links-icons)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-icon-header-links](https://github.com/discourse/discourse-icon-header-links)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Screenshots Desktop Mobile Settings This component includes a …

> [@Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588):
>
> discourse2Summary Custom Header Links allows you to easily add custom text-based links to the header.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-header-links)hammer_and_wrenchRepository Link [GitHub - discourse/discourse-custom-header-links · GitHub](https://github.com/discourse/discourse-custom-header-links)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Desktop Mobile (due to very limited space, adding more than one link on mo…

### Displaying for Logged-In Users Only

You can target anonymous users to hide elements from them. Like this for example, which hides the tags in the navigation sidebar menu from users who are not logged in. You can use a similar code to hide any element in the header from anonymous users.

```scss
.anon .sidebar-section-wrapper.sidebar-section[data-section-name="tags"] {
    display: none; 
}

```

---

<div class="post-metadata">

### Author: ![Sami\_Syed](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sami_syed/32/93193_2.png) [@Sami\_Syed](https://meta.discourse.org/u/Sami_Syed)
#### Post date: [August 26, 2023, 6:06pm UTC](https://meta.discourse.org/t/add-button-in-header-for-logged-in-users/276704/4 "2023-08-26T18:06:12Z")

</div>

this is a great solution,

I really only wanted one button on top.

What I ended up doing was just asking ChatGPT how to add it manually with code and it gave me a working solution…

Header:

```plaintext
<script type="text/discourse-plugin" version="0.8.22">
api.decorateWidget('header-buttons:after', helper => {
    let currentUser = api.getCurrentUser();
    if (!currentUser) return; 
    
    return helper.h('li.custom-login-button-li', [
        helper.h('a.custom-login-button', { href: 'ENTER URL HERE', target: '_blank'}, 'Button')
    ]);
});
</script>

```

CSS

```plaintext
.custom-login-button {
    display: inline-block;
    margin: 0;
    padding: 0.5em 1em;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    font-weight: bold;
    line-height: 1.5;
    border-radius: 3px;
    color: #fff !important;
    background-color: #0084ff;
    border-color: #0076e6;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.custom-login-button:hover {
    background-color: #0076e6;
    border-color: #0065d0;
}

.custom-login-button-li {
    list-style-type: none;
}

```

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 26, 2023, 6:07pm UTC](https://meta.discourse.org/t/add-button-in-header-for-logged-in-users/276704/5 "2023-08-26T18:07:38Z")

</div>

nice work @Sami_Syed.

I use the header Icon link TC above on my forum for one icon for only mobile users.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [September 25, 2023, 6:07pm UTC](https://meta.discourse.org/t/add-button-in-header-for-logged-in-users/276704/6 "2023-09-25T18:07:57Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.