# Discourse Tab Bar for Mobile
**URL:** https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696
**Category:** Theme component
**Created:** [December 8, 2017, 6:05pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696 "2017-12-08T18:05:34Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [December 8, 2017, 6:05pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/1 "2017-12-08T18:05:34Z")
GitHub repository:
[https://github.com/OsamaSayegh/discourse-tab-bar-theme](https://github.com/OsamaSayegh/discourse-tab-bar-theme)
### Screenshots
* * *
### Installation
Follow the instructions in this #howto topic:
> [@Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682):
>
> bookmark This is a guide for installing and managing themes and theme components in Discourse. person_raising_hand Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…
### Customization
See the [readme](https://github.com/OsamaSayegh/discourse-tab-bar-theme/blob/master/README.md) file in the theme’s GitHub repository.
Ideas to improve this theme are very welcome 🙂
* * *
### Update 24/12/2018:
You no longer need to overwrite any code in order to customize this theme. It’s now shipped with theme settings that allow customization for each of the 6 tabs with ability to disable any tab. See the [readme](https://github.com/OsamaSayegh/discourse-tab-bar-theme/blob/master/README.md) file for details.
---
### Author:  [@discoverearth](https://meta.discourse.org/u/discoverearth)
#### Post date: [June 26, 2020, 7:33am UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/95 "2020-06-26T07:33:05Z")
Hey, I love this plugin. But I need to make the bar visible for logged out users too.
Is there a way to do this? Maybe something like
```
body:not(.logged-in) .d-tab-bar-theme {
display: block
}
```
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [June 27, 2020, 7:39pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/96 "2020-06-27T19:39:38Z")
Hi Ben
The component’s JS code expects in several places that there is a logged in user, so CSS wouldn’t be enough to show the bar for anonymous users. My recommendation here is to fork the component and modify it to make it show up to anonymous users.
---
### Author:  [@petepan23](https://meta.discourse.org/u/petepan23)
#### Post date: [June 30, 2020, 2:21am UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/97 "2020-06-30T02:21:45Z")
How to add a `+` new post button to the bar?
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [June 30, 2020, 6:00pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/98 "2020-06-30T18:00:31Z")
Hi Peter,
Discourse core has this neat route `/new-topic` that exists to make it possible to open the composer via a URL. So, all you need to do is use that route as the URL for the tab that should open the composer.
---
### Author:  [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [September 5, 2020, 8:49pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/99 "2020-09-05T20:49:10Z")
This component is very useful and our forum users truly like it.
One of the most requested features is to display unread notifications badge and unread PMs badge on the keys at the bottom of the screen.
Does the Discourse JavaScript API allow us to do this?
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [September 7, 2020, 11:13pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/100 "2020-09-07T23:13:24Z")
Hi Nildarar,
I’m glad to here that your community enjoys this component and finds it useful, thanks! I support adding this feature to the component, but I can’t implement it right now (maybe in a few months). Though if someone else feels like working on this feature in the meantime, I’d be totally happy to merge a pull request with this feature.
> [@nildarar](#):
>
> Does the Discourse JavaScript API allow us to do this?
Yes, the data needed is exposed in the `currentUser` object which is easily accessible. Most of the work for this feature would be 1) figuring out which tab(s) to display the badges on and 2) positioning the badges correctly with CSS.
---
### Author:  [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [September 9, 2020, 5:24am UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/101 "2020-09-09T05:24:48Z")
Thanks @Osama
Based on your guidance, I found these objects.
```
// unread_high_priority_notifications: 2
// unread_notifications: 7
// unread_private_messages: 2
```
Is there a way we can register a function in an event or should we find out about this through the following trick?
```
$('.header-dropdown-toggle current-user').bind('DOMSubtreeModified', function(){
console.log('changed');
});
```
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [September 9, 2020, 2:34pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/102 "2020-09-09T14:34:24Z")
Yes these are the correct properties that we need to consume, but with Discourse being an Ember application, we typically don’t subscribe to DOM events to update the UI. Instead, we should use what Ember calls [‘computed’ properties](https://guides.emberjs.com/v3.3.0/object-model/computed-properties/).
The component already defines a computed property [here](https://github.com/OsamaSayegh/discourse-tab-bar-theme/blob/c05adce3274ffee821eadac8f81ffb54b85e5045/mobile/head_tag.html#L74-L85), so you can use that as an example. Once you’ve defined your computed property that determines whether or not the notifications badge should be displayed (based on the `currentUser.unread_high_priority_notifications` etc. properties), you will need to use your computed property in the Handlebars template in the same link at the bottom.
Note: implementing this feature in a separate component is tricky, so everything I said here assumes that you’re implementing this in the component itself, not a separate component.
---
### Author:  [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [September 9, 2020, 2:58pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/103 "2020-09-09T14:58:24Z")
Thank you, let me try 😉👍
---
### Author:  [@thegurjyot](https://meta.discourse.org/u/thegurjyot)
#### Post date: [February 5, 2021, 8:26pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/104 "2021-02-05T20:26:18Z")
Tab bar is showing white background even on Dark Theme. I just updated from 2.7.0 beta 1 to 2.7.0 beta 3 and after that the white background started to show. Prior to that everything worked just fine. I also tried to remove all other theme components and remove all customization to confirm is anything is messing up with the tab bar. But even on barebones Discourse, the Tab bar has a white background on a dark theme. Can someone please take a look in this?
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [February 6, 2021, 10:50am UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/105 "2021-02-06T10:50:46Z")
I’ve pushed a fix for this issue. Thanks for letting me know!
---
### Author:  [@haroldfy](https://meta.discourse.org/u/haroldfy)
#### Post date: [February 10, 2021, 8:10pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/106 "2021-02-10T20:10:54Z")
Looks like this tab will make the topic-progress covers the reply button in some cases (E.g. I can reproduce this using Chrome to simulate iPhone SE)
As you can see, the reply button is covered by the progress bar. But if I disable the bar, it works. I guess it’s because the progress button’s position is relative, but I don’t know how to fix it.
---
### Author:  [@littleviolette](https://meta.discourse.org/u/littleviolette)
#### Post date: [February 11, 2021, 12:08am UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/107 "2021-02-11T00:08:16Z")
I have a similar issue. The “table of content” button does not show up when I enable the Mobile Tab Bar. It would be nice if we do not have to choose one feature over another because we love both!
 
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [February 13, 2021, 5:17pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/108 "2021-02-13T17:17:11Z")
@haroldfy I cannot reproduce this issue here on Meta or theme creator. Maybe you have other themes/customizations that are interfering? I can take a look if your site is public.
@littleviolette I try to avoid as much as possible adding code that targets elements of another component. In this case, you can create a separate component with this CSS to push the ToC button above the bar:
```css
html:not(.anon) .d-toc-toggle {
margin-bottom: 55px;
}
```
---
### Author:  [@haroldfy](https://meta.discourse.org/u/haroldfy)
#### Post date: [February 13, 2021, 9:39pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/109 "2021-02-13T21:39:14Z")
thanks for looking into this. It’s a private site, I will try to disable other customization and debug from there.
---
### Author:  [@MrDavis97](https://meta.discourse.org/u/MrDavis97)
#### Post date: [February 24, 2021, 10:45pm UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/110 "2021-02-24T22:45:36Z")
I think I found a bug, and I can only produce it on the PWA version of my site on iOS (seems fine on Android and on iOS safari).
The tab bar is supposed to always be locked, right? This is what it looks like when correct:
And then I unlock my screen, go into landscape mode, and then go back to portrait mode, and then I scroll up a little, and then this happens:
---
### Author:  [@Chicotagada](https://meta.discourse.org/u/Chicotagada)
#### Post date: [March 1, 2021, 9:26am UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/111 "2021-03-01T09:26:17Z")
> [@haroldfy](#):
>
> Looks like this tab will make the topic-progress covers the reply button in some cases
I had the same problem @haroldfy@littleviolette . You can fix it with :
```
html:not(.anon) #topic-progress-wrapper.docked{
margin-bottom:0!important;
}
```
---
### Author:  [@renato](https://meta.discourse.org/u/renato)
#### Post date: [April 27, 2021, 12:45am UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/113 "2021-04-27T00:45:08Z")
The tab bar also conflicts with the posts filter core feature which puts a sticky footer (`posts-filtered-notice`) when filtering.
Anyway, thanks for this great TC 🙂
---
### Author:  [@Kchalk](https://meta.discourse.org/u/Kchalk)
#### Post date: [May 10, 2021, 12:49am UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/114 "2021-05-10T00:49:51Z")
Awesome theme component, thank you
I have an ask and would like to check if there is interest in a ‘scroll to hide’ feature?
Essentially, the bottom bar auto-hides when user scrolls down, the re-appears as user scrolls up
Example I found is here
[ ](https://miro.medium.com/v2/resize:fit:640/1*5XuieX7b6u2SkLDd9KEJyg.gif)
This will thoughtfully free up precious screen estate in mobile, and make the consuming of content a better experience with more space
[Next page](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696.md?page=2)