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

Mike Nørgaard
Mike Nørgaard
2,604 Points
Posted by Mike Nørgaard
Mike Nørgaard
2,604 Points

Why does my navigation bar stop sticking to the top of my browser when I post content in my main section?

Hey! I'm new to CSS, and I've run in to an issue that I simply cannot wrap my head around.

I'm practicing making navigation bars, and I thought I had done exactly what you're supposed to when you're making a classic fixed navigation bar: give the body element 0 in padding and margin (to remove the user agent stylesheet that prevents the fixed navigation bar from staying completely at the top) and then set the margin-bottom to push away all incoming content (in my case the main section).

Note that my entire navigation bar is within the header element. My HTML looks like this: 

<body>
    <header>
        <!-- Navigation -->
        <div class="navigation">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </header>

    <main>
        <!-- Welcome message -->
        <section>
            <h1>Welcome to my page.</h1>
        </section>
    </main>
</body>

I've handled the goal of making my fixed header like this:

body {
    margin: 0px;
    padding: 0px;
    /* Background color black to emphasize the behaviour*/
    background-color: #000;
}

/* Navigation bar */
.navigation {
    position: fixed;
    width: 100%;
    padding: 10px 0;
    border: 1px solid #fff;
    background-color: #fff;
}

.navigation li {
    padding-left: 20px;
    display: inline-block;
}

.navigation a {
    color: #000;
    text-decoration: none;
}

.navigation a:hover {
    text-decoration: underline;
}

It works when there's no content inside the <main> element. So far so good.

When I do put something, like an h1 tag, inside the main element, though, it automatically creates margin. Even though it's telling me that there's no margin in the body or header element. I've tried removing all possible margin and padding and i've also tried using more margin-bottom, but that doesn't do anything.

Why is this so?

This is my first post as well, so I'm terribly sorry if this is messy or if it's usually done in another way. I'll take feedback anytime I can to improve.

Have a great evening (or morning) and thanks in advance!

1 Answer

Blake Larson
Blake Larson
13,014 Points
Blake Larson
Blake Larson
13,014 Points

Just make sure to give it a top value.

body {
    margin: 0px;
    padding: 0px;
    /* Background color black to emphasize the behaviour*/
    background-color: #000;
}

/* Navigation bar */
.navigation {
    position: fixed;
    top: 0;  // <------------------------------- make the fixed element stay at top 0
    width: 100%;
    padding: 10px 0;
    border: 1px solid #fff;
    background-color: #fff;
}

.navigation li {
    padding-left: 20px;
    display: inline-block;
}

.navigation a {
    color: #000;
    text-decoration: none;
}

.navigation a:hover {
    text-decoration: underline;
}

h1 {
  color: #fff;
  margin-top: 100px; //<------ The main element will now also start at the top because the navigation is out of the cascading flow
}