How to move the new topic header button and make larger for mobile devices

Billy · July 18, 2025, 11:21pm

Hi all! I searched for answers, but didn’t find any. I would like to move the new topic header button (image attached, I changed text to “Ask Your Question”, button in green) to the left of the category link in the header. I want it to be more visually prominent on both desktop and mobile devices. Also, would like to resize on mobile devices so the actual green button shows.

Is this possible? Thanks for any direction!

NateDhaliwal · July 19, 2025, 12:02am

Hi there, you can try forking it and changing this outlet:

github.com/discourse/discourse-new-topic-button-theme-component

javascripts/discourse/initializers/initialize-header-new-topic-button.gjs

ab8b7edee


      
          import { apiInitializer } from "discourse/lib/api";
          import CustomHeaderTopicButton from "../components/custom-header-topic-button";
          
          export default apiInitializer("1.15.0", (api) => {
            api.renderInOutlet("before-header-panel", CustomHeaderTopicButton);
          });

to something like:

api.renderInOutlet("bread-crumbs-left", CustomHeaderTopicButton);

For example, I put the button above the sidebar here:

github.com/NateDhaliwal/discourse-new-topic-button-theme-component

javascripts/discourse/initializers/initialize-header-new-topic-button.js

f605192ee


      
          import { apiInitializer } from "discourse/lib/api";
          import CustomHeaderTopicButton from "../components/custom-header-topic-button";
          
          export default apiInitializer((api) => {
            api.renderInOutlet("before-sidebar-sections", CustomHeaderTopicButton);
            /*
            document.addEventListener("DOMContentLoaded", function() {
              const newTopicBtn = document.getElementById("new-topic-button");
              const sidebar = document.getElementById("d-sidebar");
              if (newTopicBtn && sidebar) {
                sidebar.insertBefore(newTopicBtn, sidebar.firstChild);
              }
            });
            */
          });

You can also probably change the button using some CSS (make a new theme, and put the CSS in the ‘mobile’ tab or in mobile.scss if you’re using a repo).

Billy · July 19, 2025, 7:28pm

Thank you so much!! I appreciate your time and help. I’ll give it a try.

Topic		Replies	Views
Move create topic to the top Feature	4	1097	January 5, 2019
Mobile new topic button Support	0	43	April 6, 2025
New Topic button hidden text Dev	1	49	May 7, 2025
How to move the New Topic button? Support	0	548	October 22, 2020
Floating "New topic" button Support	24	4305	December 10, 2022

How to move the new topic header button and make larger for mobile devices

Related topics