This article originally posted on Medium

View Demo here: Peekaboo Nav Bar (Codepen).

This week at HackerYou we tackled HTML5 and CSS3. As our first project, we were tasked with coding a one-page website from scratch. Having already completed a similar task before the course started, I wanted to incorporate some effects I’ve never used before. As soon as I saw THIS nav bar, I knew I wanted to make it my own.

Upon inspecting the nav bar element, I was found that they used a little trick here: They made a slice of the top of the image in fit into the nav bar that seamlessly blended with the header image. This image could then be applied as a nav bar background to be revealed when a nav link was hovered. Not wanting to deal with precisely creating a slice of my header image (too much math!), I was determined to find another way. My first thought was this:

nav {
  background: rgba(0,0,0,0.7);
}
nav ul li a:hover {
  background: none;
}

I quickly realized this wouldn’t work, as the background on a:hover would simply reveal the transparent black background on the nav.

In order to make this happen, I had to ensure that there were no backgrounds between the image I wanted to reveal and the nav elements that would show through on hover. I started by splitting the nav into 2 sections: one for the Company name, and another for the actual nav bar. By floating these 2 elements side by side, I would give the illusion of a full-bleed nav. The nav li were then divided into 4 equal sections.

nav {
  width: 55%;
  float:right;
}
.companyName {
  width:45%;
  float:left;
}
nav ul li {
  width: 25%;
  float: left;
}

Here’s a look at the nav before I edit down the padding on the Company name h2:

The navbar with minimal styling
Here we can clearly see that our ‘nav bar’ is really made up of 2 separate elements.

The then edited the padding on the .companyName, and jacked up the padding on the left side to make it look like margin: 0 auto was centering it on the page. Now it looks more like this:

Navbar with centered left side, uneven right side.
Things are looking better - but it's a bit lopsided.

Things are looking better — using padding to push in the h2 gives the appearance of centering on the page. I wanted to push in the right side a bit as well, no one likes a lop-sided webpage!

header nav ul li {
  border-right: 100px solid rgba(0,0,0,0.7);
}

Finished nav bar with a ‘margin: 0 auto’ appearance.

The finished navbar!
The finished navbar!
Finished navbar with a demo hover.
Finished navbar with a transparent hovered link.

Finished nav bar with a hovered link. Ta-da! All done.

Check out the full code here: Peekaboo Nav Bar (Codepen).

If you have any questions, get at me on twitter @jennyveens.

Have a better way of achieving this effect? I’d love to see it! Please share it in the comments ☺