MenusLesson 36Free preview

Navbar on Image

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of a Transparent Navigation Bar on the Background Image (Navbar on Image / Hero Navbar). This stunning visual design pattern places a navigation bar with a transparent or semi-transparent background floating just above the full-screen banner hero image.

Key points

The background image is attached to the hero container using the background-image, background-size: cover
Navbar is given the property position: absolute; top: 0; width: 100%
The background color of the navbar is set to transparent (background: transparent or semi-transparent rgba)
The text color of the link is contrasted (clean white) to be easily readable above the image

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.