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

Having trouble with my sticky nav bar

I'm trying to write a piece of code that will create a sticky nav bar that contains 2 sets of links. One set is going to be on the right, and one set will be on the left. So far I've been able to get the nav bar to stick, but one set of links won't show up. What am I doing wrong that's making the second set of links disappear? Here's my code for reference

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <ul class="navl">
                <li><a href="#">Gallery</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Home</a></li>
            </ul>
            <ul class="navr">
                <li><a href="#">Contact</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Showcase</a></li>
            </ul>
            <div class="logo">h</div>
        </div>
    </div>
</body>
</html>
.wrapper {
    width: 100%;
}

.header ul {
    margin-left: -10px;
    margin-top: -15px;
    padding: 30px;
    list-style-type: none;
    background: #333;
    width: 97%;
    position: fixed;
    z-index: 10;
}

.logo {
    width: 100px;
    height: 100px;
    color: #fff;
}

ul.navl li a {
    display: inline;
    padding: 0 10px 0 0;
    font-family: Helvetica;
    float: left;
    color: #FFF;
    text-shadow: 2px 2px #000;
    font-size: 20px;
    text-decoration: none;
    z-index: 20;
}

ul.navr li a {
    display: inline;
    padding: 0 10px 0 0;
    font-family: Helvetica;
    float: right;
    color: #FFF;
    text-shadow: 2px 2px #000;
    font-size: 20px;
    text-decoration: none;
}

4 Answers

I messed around with it, not sure if this is the best approach but it's a good starting point:

.wrapper {
    width: 100%;
}

.header ul {
    margin-left: -10px;
    margin-top: -15px;
    padding: 30px;
    list-style-type: none;
    background: #333;
    width: 45%;
    position: fixed;
    z-index: 10;
}

.headerright ul {
    padding: 30px;
    list-style-type: none;
    background: #576;
    width: 45%;
    position: fixed;
    top: -24px;
    left: 50%;
}

.logo {
    width: 100px;
    height: 100px;
    color: #fff;
}

ul.navl li a {
    display: inline;
    padding: 0 10px 0 0;
    font-family: Helvetica;
    float: left;
    color: #FFF;
    text-shadow: 2px 2px #000;
    font-size: 20px;
    text-decoration: none;
    z-index: 20;
}

ul.navr li a {
    display: inline;
    padding: 0 10px 0 0;
    font-family: Helvetica;
    float: right;
    color: #FFF;
    text-shadow: 2px 2px #000;
    font-size: 20px;
    text-decoration: none;
}

It's not quite what I had in mind, but it works. I actually like it better. Thanks! :]

It's not quite what I had in mind, but it works. I actually like it better. Thanks! :]

Hi Robert,

Just some thoughts on your code:

Try to work with the layout first, e.g. leave all the text styles and decoration for now. Also, as James said, make sure you're not repeating yourself (DRY Principle).

Some things I've noticed and maybe a few tips below:

  • Do you really want to target the "a" elements, e.g. "ul.navr li a" or would targeting the .navl, .navr classes itself work better?
  • .navl & .navr are both children of the header class. When floating them right, make sure you give the header a height, otherwise it will collapse.
  • At the moment all .ul (unordered lists) of the header element have the same properties? Is this really what you want? Have a look there and maybe experiment in Codepen or Treehouse Workspace.

Not sure if this helps, I hope it does. Let me know if you're still having trouble. Keep on going, you are very close.

Cheers, Carsten

James Ingmire
James Ingmire
11,901 Points

Break down your code so your not repeating yourself, using z-index the same as each other, then target the left and right setting float right and left separately. (''' .navr .navl { display: inline; padding: 0 10px 0 0; font-family: Helvetica color: #FFF; text-shadow: 2px 2px #000; font-size: 20px; text-decoration: none; z-index: 20 } .navr { float: right; } .navl { float: left; } ''') Sorry if i am wrong and wasted your time, may help. Let me know if works. :(

Reduced my code to this. It's neater now, but the left part of the nav bar still wont show up

ul.navr li a, ul.navl li a {
    display: inline;
    padding: 0 10px 0 0;
    font-family: Helvetica;
    color: #FFF;
    text-shadow: 2px 2px #000;
    font-size: 20px;
    text-decoration: none;
    z-index: 40;
}

ul.navr li a {
    float: right;
}

ul.navl li a {
    float: left;
}

and index.html

<html>
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <ul class="navl">
                <li><a href="#">Gallery</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </div>
        <div class="headerright">
            <ul class="navr">
                <li><a href="#">Contact</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Showcase</a></li>
            </ul>
            <div class="logo">h</div>
        </div>
    </div>
</body>
</html>