Is there a way to disable hiding interface elements when scrolling?

Custom CSS & Theme Design
1

There is new behaviour in Obsidian 1.11 for Android:

When scrolling down in a note, the navigation will automatically hide to maximize screen space for reading. Tap or scroll back up slightly to reveal the navigation again.

Is there any way to disable hiding any elements?

1 Like
2

Not using a phone for Obsidian, myself. So I cannot check but I think I understand. I’d be surprised if there were any built-in settings.

@Abisheik over at the Share & showcase section shared at least 5-6 patches toward similar outcomes I reckon. Would entail using Codescript Toolkit.

Related I guess:

3

You can actually use a simple CSS snippet for this!

Just prevent the app header from hiding

.is-phone.is-hidden-nav .view-header {
    transform: none;
    opacity: 1;
}

Just prevent the mobile navigation bar from hiding

.is-phone.is-hidden-nav .mobile-navbar {
    transform: none;
    opacity: 1;
}

Prevent both the mobile header and the navigation bar from hiding

.is-phone.is-hidden-nav .view-header,
.is-phone.is-hidden-nav .mobile-navbar {
    transform: none;
    opacity: 1;
}
4 Likes
4

Thanks Abisheik. That works for the bottom bar, but in my Android it doesn’t stop the mobile header from hiding.

I asked Perplexity to fix it. This code keeps the mobile header visible but also creates a big gap above the title when scrolled up.

I tried fixing it, but Perplexity’s “fixes” for the gap meant the hiding behaviour returned.

Maybe someone can do better:

.is-phone.is-hidden-nav .view-header,
.is-phone.is-hidden-nav .mobile-navbar {
    transform: none;
    opacity: 1;
}

.is-phone .view-header {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
}
5

Can you try:

.is-phone .view-header,
.is-phone .mobile-navbar {
    transform: none;
    opacity: 1;
}

Since I don’t have the issue, I can’t be sure, but if that CSS snippet you posted sorta works then maybe the issue is that the .is-hidden-nav class is doing something different on your device.

6

If the !important is… Well. Important… Then, maybe:

.is-phone .view-header,
.is-phone .mobile-navbar {
    transform: none !important;
    opacity: 1 !important;
}

Or… Just force everything:

.view-header, .mobile-navbar {
    transform: none !important;
    opacity: 1 !important;
}
7

Unfortunately no. I tried those 3 and it still hides (but thank you).

8

For the record, turning off “full screen” now solves this:
Settings > Appearance > (Interface section) > Full screen

But this thread could help if someone wants to allow one but not the other to hide.

(Also, I’ve now become accustomed to the hiding behaviour. It’s become intuitive to move my finger slightly to make them appear when I need them.)

1 Like