Discourse Tab Bar for Mobile



I suspect this is caused by components interfering with each other. What other components or plugins do you have installed?

(Gurjyot Singh) #46

I am using a total of 4 components.

  1. Tab Bar for Mobile
  2. Category Banners
  3. Hamburger theme selector
  4. Versatile Banner


Hmm those shouldn’t interfere. What’s your site URL? (PM it to me if you don’t want to post it here). I will investigate later today.


@thegurjyot This is indeed caused by this component and Versatile Banner interfering with each other only when the full width banner option in Versatile Banner is turned on.

As a quick workaround, create a new component with this piece of CSS in Mobile > CSS and add the component to your active theme:

html:not(.anon) div#topic-progress-wrapper.docked {
    margin-bottom: unset !important;

(Gurjyot Singh) #49

Thanks a lot, your reply fixed the issue perfectly. Now, I look forward when the issue is resolved from the component’s side as well. :slight_smile:

(David Kingham) #50

Is there any way to make one of the icons act as a ‘back’ button?


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

(Gurjyot Singh) #52

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.

(jrgong) #53

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?


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.

(Aekansh Dixit) #55

Can I add a custom image as an icon?

(jrgong) #56

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


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.

(Lee Strickland) #58

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?

(Lee Strickland) #60

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

(Lee Strickland) #61

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

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

(Lee Strickland) #62

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?


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.