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

AI-generated summary

In a UX-focused discussion titled ‘How to move the new topic header button and make larger for mobile devices,’ Billy seeks to reposition the ‘Ask Your Question’ button to the left of the category link in the header for greater visibility on desktop and mobile, and to resize it for better mobile display. NateDhaliwal suggests forking the theme component and modifying the outlet in the JavaScript initializer to bread-crumbs-left to relocate the button, referencing an example where the button was placed above the sidebar. Additionally, Nate recommends using CSS within a custom theme—specifically in the mobile tab or mobile.scss file—to adjust the button’s size on mobile devices. Billy thanks Nate for the guidance and plans to implement the changes.

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!

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

to something like:

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

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

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).

2 Likes

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

1 Like