Documentation navigation becomes unreadable when scrolling down

Question

With the new documentation layout/theme the navigation links blend into the background too much.

Before scrolling down:

After scrolling down:

As you can see, even the highlighting (rightmost link) is barely visible.

IMO either the background for the navigation links should be sticky as well, or the links should have a color that contrasts with both the navigation background and the regular page background.

Update:

I just double-checked and noticed I hadn't enabled JavaScript for the page. With JavaScript enabled the navigation is a sticky orange bar, as Momin described in his answer. Without JavaScript the behavior is as described above.

Frankly, I'm not a fan of making JavaScript a requirement for documentation pages. Even more so when a sticky navigation bar shouldn't be too difficult to realize with just CSS.

Comments

Although I agree with you, I'm wondering how often you browse the web with JavaScript disabled :)

---

Me? Most of the time, actually. I use NoScript to disable JavaScript by default and enable for specific sites.

Answer 1

I've made a change to prevent the header being sticky when JS is disabled. (That was the easiest way to fix it, since stickying the wavy parts means links become unclickable when they go underneath it.)

Comments

That works for me. Thanks.

Answer 2

work fine for me

Before scrolling down:

After scrolling down:

for me background for the navigation links is sticky.

but I have a problem with mobile view, I'm not a fan of scrolling navigation link instead I would like hamburger menu on top-right corner.