Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by J.C. Hiatt
J.C. Hiatt
9,393 Points

How do I make an anchor tag completely fill at list item in a nav bar?

On http://blugertrude.com, the :hover state only becomes active on a small portion of each nav bar link. I've tried to give the anchor element a height and width of 100%, but that hasn't worked. I know I could just put the list item inside the anchor tag instead of the other way around, but that wouldn't be valid code.

Thoughts?

4 Answers

Jose Fremaint
Jose Fremaint
2,885 Points

You have to add Padding to the anchor, thats how you control the size of the button and all the area will be clickable.

Example:

.mybutton li a {
padding: 20px 20px;
}
J.C. Hiatt
J.C. Hiatt
9,393 Points
J.C. Hiatt
J.C. Hiatt
9,393 Points

Thanks! While that worked, is there a way to get this working correctly without making the current buttons bigger than they were? How would I go about this and still maintain the size of the original links?

Atanas Sqnkov
Atanas Sqnkov
14,981 Points
Atanas Sqnkov
Atanas Sqnkov
14,981 Points

Hi J.C. Hiatt!

To fix your small problem You simply need to add the :hover state to your list tags, not the anchor tags. Give it a try!

P.S. You have assigned a class of "link-1 / link-2 / link-3 ...". Why? You can assign a class="link" for your navigation or something like that.

J.C. Hiatt
J.C. Hiatt
9,393 Points

I actually didn't build this. It's a Shopify theme that was built by another company.

Jose Fremaint
Jose Fremaint
2,885 Points
Jose Fremaint
Jose Fremaint
2,885 Points

Just control the pixels,

Example:

.mybutton li a {
padding: 8px 15px;
}

The 8px is the HEIGHT and BOTTOM and the 15px is the LEFT and RIGHT.