Mobile Navigation Bar Unreadable Over Text

Description

I found reading one our recent blog post on React Native on my phone into work that the navigation design was both distraction in visually confusing in terms of usability. Both the back button and the ustwo navigation button blended in with the text I was reading and vanished when looking at the code snippets.

Possible Solution

It would be nice if the navigation bar became opaque when scrolling past the hero image on the blogs on mobile, but maintain transparency at the top of the page. That way the buttons in the navigation bar would always be clearly visible. Similarly, the user/reader would visually track the bottom of the site's opaque navigation bar rather than the bottom of the browser's navigation bar and it would be less jarring.

Example Screenshots