Navbar: Inversion Conversion

Julian Smith
Nov 8 · 2 min read

Background

I’ve just started my third (Ruby on Rails) web app as part of the coding boot-camp I’m taking. Just like on the prior two apps, the first visual thing we create is our navigation bar using Bootstrap. Note that we started the navbar with the example code from the Bootstrap documentation.

One thing you should know about me is that I am sensitive to white pages with black text. To me, they appear very bright and are difficult to look at.

Experimentation

I found a cool pattern to use as a background for my navbar. The only problem was, the image was way too bright for me. I decided that I’d just add the background, then just try to find a way to invert just the image in my CSS code. After that, I planned on changing design elements to a darker scheme as I went along.

While I searched, I found that it was not very straightforward to invert just the image in my CSS. It was, however, very easy to invert the entire element (the navbar class, in this case). It was then that it occurred to me — why don’t I just do that? It actually took care of everything I needed at once, including saving me from manually restyling the colors of all the elements.

In the end, what I found was a simple way to quickly get a dark navbar up and running. All you have to do is (1) paste the nav-bar code into your view script. Then, in your navbar CSS code (2) add your light background pattern, then (3) invert the whole element.

.navbar{
background: image_url(‘ripples.png’);
filter: invert(1);
}

Original
Inverted

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade