Clever NavBar for Sutta Central

Bhante @Sujato,

I was sooooo surprised and happy to have found your comment on my video.

Originally, I wanted to share it with you here via Discourse but later my priorities changed. It is also great to hear that you keep on improving the UI.

I have another feedback to share. It is a feature that I am using on my website. I call it a Clever Navbar.

Here in this video I explain how it works.

This „Clever Navbar“ is actually my idea. I am a little bit of a front-end devoloper. It is just 20 lines of code. I you decided to use it, your developers should be able to find the code on my website. They will know how to find there.


P.S. I have also used your translations of and translated your suttas to the Czech language. The audio version is on YouTube already. It is just cool.


I have a few more notes. When I was creating my website I was researching UI a lot. You are probably aware of some of these features but I will mention them. Perhaps it will help.

  • usually 63-75 characters are recommended per line
  • eventually I decided to use black font on white background
  • At the end of each line, the eyes of the user are moving from right to left, they have to find the new line below. Therefore, I am using a grey area on both of the sides. I think that it helps with this process. Actually, any PDF document in my PC browser is displayed in a similar way: black font on white background with a grey area on both of the sides.

All my best for your work,


Hi Borek,

Thanks, that’s nifty. Little details like this are always harder than they look! I’m still not happy with the implementation on SC: previously it was too sensitive, now I think it’s too insensitive.

I tried out your implementation. It’s nice! I wonder if it would be better to add a time component? At the moment the nav bar disappears if you scroll up 250px. But sometimes you’re just scrolling gradually up. What if it were 250/1 second?

You’re most welcome to have a look at SC’s source code and see if you can improve it. TBH, I have tried tweaking the parameters and just can’t seem to get it right. So we kind of moved on.

The relevant file is here:

And PR is here:

Nice, thanks!

I deliberately made the default a little wider than this on SC. Why? Because when I see people using their computers, especially laptops, I often see then with multiple toolbars at the top and the bottom of the screen, and the actual website window taking maybe 2/3s of the screen height. Which on a 13" laptop is not much! Personally I get rid of everything except the narrowest toolbars at the top that I can.

Anyway, given that many users have only a few inches of vertical space available, I wanted to ensure that they could still have a reasonable chunk of text on screen. This is even more useful when there is root/translation line by line.

You can always narrow the window if you like!

Hmm, I’m not sure. I never really found it a problem, i’d like to see some studies on this.