Locking a Nav Bar with Fixed Positioning

HTML-CSS
1

I’m going through the CSS section and have a question about this lesson:

I understand how to do the challenge, but the question I have is, how do I adjust the rest of the page so that the h1 isn’t covered/overlapped by the fixed nav bar?

2

Hey.
Here’s how i would go about it. Let’s say my html looks something like this:

<body>
    <nav>some nav stuff here</nav>
    <h1>important heading</h1>
     <!--other html stuff-->
</body>

Then my CSS would look something like this:

nav{
    position: fixed;
    top: 0;
    height: 80px; /*any height you prefer*/
    /*other stuff*/
}
body{
    padding-top: 100px; /* padding >= nav height*/
    /*other stuff*/
}

Because position: fixed; takes the element out of the normal flow of the document, the padding-top on the body won’t affect the nav.
Hope this helps.
Cheers.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.