I see there have been topics about having mobile back button navigation for mobile browsers and I didn’t find solution though maybe I missed it :thinking: I’m not a coder and proficient enough with Discourse to dangerous :wink: but I did fumble through with ChatGPT to make the working BLUE colored back button in this image with my pup. [The image shows a small white dog with a blue collar on a wooden floor in a home setting. (Captioned by AI)] I want to hide on specific pages but haven’t figured out how to hide elements yet. If anyone knows I will adjust and add to instructions. How to Add a Floating Back Button in Discourse (For Mobile Users) This guide helps you add a floating “Back” button for mobile devices in your Discourse forum. It ensures the button appears only for mobile users and improves navigation for apps or browsers lacking built-in back buttons. Step 1: Create a New Theme Component Log in as Admin: Go to your Discourse forum and log in with an admin account. Access Theme Customization: Navigate to Admin > Customize > Themes. Create a Theme Component: Click Components. Click Install > Create New. Name the component “Mobile Back Button” and click Create. Step 2: Add the Back Button Code Edit the Theme Component: Click on the newly created theme component. Go to the CSS/HTML section. Add JavaScript for the Back Button: Switch to the Mobile tab. Click on the section. Paste the following code: html Copy code function addMobileBackButton() { const isMobileView = api.container.lookup('site:main').mobileView; if (isMobileView) { const existingButton = document.querySelector('.floating-back-button'); if (!existingButton) { const backButton = document.createElement('button'); backButton.className = 'floating-back-button'; backButton.innerHTML = '←'; // Unicode for left arrow backButton.onclick = (event) => { event.preventDefault(); window.history.back(); }; document.body.appendChild(backButton); } } } // Add the button on initial page load document.addEventListener('DOMContentLoaded', addMobileBackButton); // Re-check on subsequent page transitions api.onPageChange(addMobileBackButton); Step 3: Add CSS for Styling Add the Back Button Styles: In the Mobile tab, click on the CSS section. Paste the following CSS: css Copy code .floating-back-button { position: fixed; bottom: 20px; left: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: #0088cc; /* Customize the color */ color: #fff; border: none; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 1000; cursor: pointer; } Step 4: Apply the Theme Component Go Back to Themes: Navigate back to Admin > Customize > Themes. Edit Your Active Theme: Click on your active theme. Under Theme Components, add the “Mobile Back Button” component from the dropdown. Click Add and then Save. Step 5: Test Your Changes Open Your Forum on Mobile: Use a mobile browser or simulate mobile view using developer tools. Verify the Back Button: The button should appear in the bottom-left corner of the screen. Clicking the button should navigate you back in your browser history. Notes: For Mobile Only: Since the code and CSS are in the Mobile tab, the button will only appear on mobile devices. Customization: You can adjust the button’s position, size, or color in the CSS to match your forum’s design. Functionality: The back button uses window.history.back(). If there’s no previous page, it won’t navigate anywhere.

Maybe I have something wrong with my install but I was not able to swipe consistently. Still learning my way around Discourse.

For Chrome, you can swipe from the left edge to go back. On browsers, my phone’s back button also works. Does it work for you? IIRC you can use api.onPageChange() and then get the page url. See: javascripts/discourse/initializers/confetti_topic-category.gjs e602c0107 import Component from "@glimmer/component"; import { apiInitializer } from "discourse/lib/api"; //import { iconHTML } from "discourse-common/lib/icon-library"; export default apiInitializer("1.14.0", (api) => { api.onPageChange((url, title) => { const allowedCategories = settings.allowed_in.split('|'); // Assuming this is a list of slugs if (allowedCategories[0] != "") { if (url.includes('/t/')) { // Check if we're on a topic page const topicController = Discourse.__container__.lookup('controller:topic'); const topicModel = topicController.get('model'); const categorySlug = topicModel.category.slug; // Using slug for this example if (allowedCategories.includes(categorySlug)) { api.renderInOutlet( 'below-site-header',

@Jagster so I have discovered a couple of things that had affected my lack of understanding of the swiping gestures existence. On my iPhone swiping works great. I have two Android phones with Chrome. One swipes fine the other almost impossible to swipe. On Android if I install the PWA that seem seems to stop swiping working all together. The phones are all newish from 1 to 3 years old. Not sure if this has been experienced by others?

@NateDhaliwal thanks! I just posted about what my experience has been with iPhone/Android which is inconsistent by device and not working on PWA.

[image] Jakke Flemming: swiping works just fine. It does. And on Android you can even swipe back to the list of forums on the Hub App which is very cool.

So do all i-devices, but who’s counting :joy: But for that why gestures fails for some I don’t have any explanations. But all my users are using swiping all the time without complains :man_shrugging:

How to Add a Floating Back Button in Discourse (For Mobile Users)

Development

Jagster (Jakke Flemming) November 27, 2024, 12:25am 2

I don’t know, but there is no need for back button, because swiping works just fine.

Topic		Replies	Views
Adding a Back Button to Return to Scrolled Position Development ux	17	772	October 10, 2024
How to get "back" btn Product Support topic-timeline	12	492	November 22, 2024
How to put a floating reply button on mobile devices? Product Support	2	568	April 2, 2022
Buttons for Scrolling to the Top/Bottom of Topics Theme component	25	2782	September 1, 2025
Navigation back button Development	0	482	May 23, 2022

How to Add a Floating Back Button in Discourse (For Mobile Users)

Related topics