CSS to show status bar on mobile devices

Share & showcase
,
1

I just learnt about this solution from @Felipe over on Github.

Apparently, the status bar is simply hidden on mobile devices, and this CSS snippet can make it visible:

.is-mobile .app-container .status-bar {
	display: flex;
}

This is immensely useful on devices like iPads! :tada:

See the following if you don’t know how to add and enable CSS snippets:

2 Likes
2

Promising, but the mobile toolbar gets in the way/last row is overlapped.

image
image1536×684 101 KB

Okay – hasty again – fixed with Bottom Offset in Commander:

image
image1536×663 154 KB

Better:
image
image1536×697 89.1 KB

1 Like
3

Oh yeah, didn’t notice that since I use an external keyboard with my iPad.

4

Thanks for sharing the Commander solution!
As for those who don’t use Commander, I suppose some CSS tweaks could probably solve issue.

5

I don’t actually like that padding and I have 3 rows of icons so even less screen real estate remains for editor (I am using an iPad mini in portrait mode).
So I kind of bailed out for now and have this (for more of a separation kind of thing):

image
image1536×561 79.7 KB

Where the CSS fix is even more needed is the sidebar, when if it’s pinned, it looks like this:

image
image1536×455 123 KB

1 Like
6

I work with the status bar hidden when it covers the screen.
It is convenient to define a hot key in the hider plugin that supports hiding the status bar.

7

In case anyone is trying this in the future:

The following seems to work in every instance I’ve encountered in my brief time using it. I also included a commented out section to specify which plugins you want to see in the mobile status bar (hiding the rest)

/* show status bar on mobile */
.is-mobile .app-container .status-bar {
    display: flex;
    position: relative;
    justify-content: center;
    padding: 0;
    background-color: black;
    color: #b28ecc;
}

/* showonly specified plugin classnames in mobile status bar, commented out currently */
/*.is-mobile .app-container .status-bar > div:not(.plugin-obsidian-git) {
    display: none;
}*/
2 Likes