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.

[image] Custom Header Links (icons) Theme component discourse2 Summary Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header. eyeglasses Preview Preview on Discourse Theme Creator hammer_and_wrench Repository Link https://github.com/discourse/discourse-icon-header-links open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Screenshots Desktop [Capture3] Mobile [Capture] Settings This component includes a … [image] Custom Header Links Theme component discourse2 Summary Custom Header Links allows you to easily add custom text-based links to the header. eyeglasses Preview Preview on Discourse Theme Creator hammer_and_wrench Repository Link GitHub - discourse/discourse-custom-header-links · GitHub open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Desktop [Capture] Mobile [Capture] (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. .anon .sidebar-section-wrapper.sidebar-section[data-section-name="tags"] { display: none; }

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: 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') ]); }); CSS .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; }

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

Add button in header for logged in users

Development

JammyDodger August 26, 2023, 5:32am 2

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

Topic		Replies	Views
Add a link to user profile in the navigation Product Support	7	737	February 28, 2024
Custom Header Links Theme component official , custom-header-links	69	54832	June 6, 2026
Adding a header link for Guests Only Product Support	4	274	September 5, 2025
How can I add a button to the header? Product Support	4	1520	October 31, 2019
Link on Top header to Go to Home page of main site Product Support	1	1402	February 25, 2020

Add button in header for logged in users

Related topics