Discourse Tab Bar for Mobile

That’s not possible at the moment. It’d need a bit of work and refactoring to support that.


Hello @Osama, when I am on bookmarks page (and there are no bookmarks), I click on “bookmarks dropdown”, some options in the dropdown gets hidden behind the tab bar.
To understand correctly, check the image.


Amazing theme component!
I think my users are gonna love it.

Is there a way to lauch other plugins from the Menu Bar? Specifically I want to put the Babble Chat plugin button into the menu. How can I find out the route name of the plugin?

Also what’s the route name for the /categories page?

1 Like

The route name for the categories page is discovery.categories, however there is an issue with the component at the moment which causes errors when giving certain route names. That said you can specify a relative URL e.g. /categories instead of a route name and it’ll work just fine. I’ll look into fixing the route names issue next week.

Re Babble chat: I’m not familiar with that plugin, but I did take a quick a look at the plugin’s code and it seems all the routes it defines are admin routes which are used for configuring the plugin. So it doesn’t look like there is a way to hook the plugin to this component.


Can I add a custom image as an icon?

Thx! I already created a post in their topic

Do you have any idea how I could Quick Messages Plugin? I searched the code add for route, but as a non dev I have no idea what the route name could be

1 Like

Yeah similar story as the Babble plugin, this plugin doesn’t define any routes at all.

Right now this component can only work with a FA5 icon name, so no it’s not possible to add a custom image.


I also asked in the Babble topic because I’m not sure where to go about changing the issue I’m having.

Babble has a text entry at the bottom of mobile view that ends up overlapping with this theme element. This prevents users from completely seeing what they’re entering while chatting on a mobile device.

So is it here? there? css? I am just not great at ui/ux stuff and wonder if anyone can point me in a direction?

I’m not familiar with the Babble plugin, but this sounds like a trivial issue that can be fixed with a couple lines of CSS. What’s your site URL?

It’s a private site so I shouldn’t give that out. I know it limits my options for direct support.

Solution I have been given that works is to ad this to mobile CSS.

/* babble custom on mobile */
.babble-sidebar.mobile {
z-index: 1001;
1 Like

So I’m not great as css, and I’m looking to fix another UI/UX overlap error very similar to the one above.
Some users are unable to access the logout and dismiss all buttons at the bottom of the user drop down menu. I think a simple css edit to put that element infront or an edit to move the mobile tab bar behind would be a good fix for this and/or related issues.
I don’t know how to fix it for the theme component, and don’t know what css .section to put a z index fix into. Any ideas?

1 Like

You can edit the css portion of the theme, your issue is with this

$bar-height: 49px;

Your bar is bigger, if you change this value with 98 (I’m guessing), you should be fine

I’ve pushed an update that should fix these problems. Please update and let me know if you encounter these or any other problems.


The new update did fix the drop-down in bookmarks page. But now the /new-topic shortcut is not working (means the editor is not opening). And that’s the most important thing on my website. It makes it way easy for people to start a new topic from anywhere.
Please fix this.

Update: I checked it a little more and it happens only when we are on homepage and trigger /new-topic. But, if we are on any other page then and we click trigger /new-topic then the editor does open.

Are you sure this was working before? I tried reverting the update locally and this still doesn’t work. I’m thinking this might be caused by a recent change to discourse’s core.


Yes I am sure that it was working before. But I didn’t checked it for last 3 days so maybe it happened after current Discourse version beta 5. I checked it after updating Tab bar component and that’s why I reported it here.

1 Like

Its possible not to show the tab on topics pages? @Osama

Yes, you can create a new component with this bit of CSS:

body[class*="archetype-"] .d-tab-bar-theme {
    display: none;

and make it active in your main theme(s) where you have the tab bar component active.


@Osama thanks for making this! Is there a simple way to add a ‘New Topic’ tab to the component?