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:
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.
Here’s a look at the nav before I edit down the padding on the Company name h2:
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:
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!
Finished nav bar with a ‘margin: 0 auto’ appearance.
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 ☺