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 Joe Dayvie
Joe Dayvie
11,956 Points

Position: Fixed - Question

What would the best route be to have the general content lowered in order to maintain a fixed menu position on the top of the page?

Thank you =)

6 Answers

idan ben yair
idan ben yair
10,288 Points

the way that you will be able to define a fixed menu navbar would be as such:

<div class = "nav">
            <ul>
                <a href = "#"><li>HOME</li></a>
                <a href = "#"><li>ABOUT</li></a>
                <a href = "#"><li>CONTACT US</li></a>  
            </ul>
</div>

and the CSS:

.nav {
    position: fixed;
    width: 100%;
    top: 0; 
    z-index: 25;  
    height: 60px;      
}

The "top" and "z-index" attributes will help the navbar stick to the top. "z-index" is there to help decide which element should be on top of the other and the top: 0; just make it stick to the top.

Hope that helped :)

Rostislav Kavan
Rostislav Kavan
6,818 Points

I really think the anchor element should be inside the list element, for correct HTML structure.

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

no problem anytime! If you its not too much trouble I would appreciate a "best answer" selection.

If you need anymore help or have any other questions ask away and I will assist :)

Joe Dayvie
Joe Dayvie
11,956 Points
Joe Dayvie
Joe Dayvie
11,956 Points

Yes, thank you.

Joe Dayvie
Joe Dayvie
11,956 Points
Joe Dayvie
Joe Dayvie
11,956 Points

Thank you =)

I gave you the best selection immediately after reading your post =) I believe I did it correctly :P

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

yup thank you for that you did upvote me and i greatly appreciate it :)

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

Hello rostislav, not exactly right. Depends on what you're doing, if you want to make the whole area of the li as a link you will place your anchor tag around the li, if you want to just make the text as a link you'll insert the anchor tag inside the li.

Rostislav Kavan
Rostislav Kavan
6,818 Points

I am saying the correct HTML structure is anchor inside list element.

http://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element

If you want to make the whole area clickable, you simply add padding to anchor element.