MenusLesson 27Free preview

Bottom Border Nav Links

This lesson is part of How To · All levels

Summary

This lesson reviews the effect of the bottom boundary on navigation links. This minimalist and modern design does not use the full background block color when hovered, but instead features an elegant border-bottom as the cursor hovers above the link.

Key points

Remove the background color of the block to create a clean modern look
Apply transparent border-bottom to normal conditions to prevent layout shift vibration
Change the color of the border-bottom (e.g.: 3px solid #04AA6D) when the link is hovered or active
Provide a professional aesthetic that is widely used in corporate and technology sites

Full lesson

Code examples and quizzes

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