Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

hi-lighted nav on hover with foundation

how can l create a nav bar that when they user hovers like seem like the particular item they hovered on is hi-lighted using foundation?l tried using borders but seem to be having sum issue so scrapped it all. Nick Pettit Guil Hernandez

this image gives a clearer idea of what i am talking on about guys thanks in advance highlighted nav bar

2 Answers

Pavle Lucic
Pavle Lucic
10,801 Points

From the picture, it seems that you want to achieve that you have bottom border of whole navigation, and on hover eache menu item to have some yellow fat border.

you can achieve with slighty adjustments

.nav-bar li:after {
 content: "";
 display: block;
 background: yellow;
 height: 0px;
}

.nav-bar li:hover:after {
  height:10px;
}

that worked thanks border. however how can l add on an :active to it please?

Pavle Lucic
Pavle Lucic
10,801 Points

you need to do that in html.

.nav-bar li:active:after { background:red; }

Zdenek Krcal
Zdenek Krcal
49,910 Points

Hi, I think you can do it by simple css styles:

.nav-bar { border-bottom: 1px solid gold; } .nav-bar li:hover { border-bottom: 3px solid gold; }

maybe you will need to use some styles with padding and margin too.