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

Abdi Ahmed
Abdi Ahmed
7,151 Points
Posted by Abdi Ahmed
Abdi Ahmed
7,151 Points

Fixed navigation menu when you scroll down not working properly.

Hi everyone! I'm trying to get my navigation menu to stick at the top when you scroll down. I have used position: fixed - but it doesn't come out properly. The space between the header and the main wrapper div shrinks and the header sits on top - hiding some content. You can take a look here to see what I mean: http://abdiahmed.github.io/abdi-ahmed-portfolio/

Many thanks in advance for your assistance. Here is my html and css

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Abdi Ahmed | Web Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>

<header> <a href="index.html" id="logo"> <h1>Abdi Ahmed</h1> <h2>Web Developer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimenting with Colors</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Number two</p> </a> </li><li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to achieve glow</p> </a> </li><li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drip effect created with Photoshop</p> </a> </li><li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Number 12</p> </a> </li> </ul> </section>

</div> <!-- End of div wrapper --> <footer> <div id="about-me"> <h3>About</h3> <p>Hi I'm Abdi! This is my Web Development portfolio where I share all of my favourite work. When I'm not developing websites, I enjoy reading, exercisng, teaching, and more. </p> <p>If you'd like to follow me on Twitter, my username is <a href="#">@Abdi</a></p> </div>

    <div id="social-icons">
    <a href="#"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
    <a href="#"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
    <p>&copy; 2014 Abdi Ahmed</p>
    </div> 
  </footer>

</body> </html>

css

/*********************** GENERAL ************************/ body { font-family: 'Open Sans', sans-serif; margin: 0; height: 100%; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width:100%; }

h3 { margin: 0 0 1em 0; }

/*********************** Heading ************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; position: fixed; z-index: 999;

}

logo {

text-align: center; margin: 0; }

h1{ font-family: 'Changa one', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em;

}

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/*********************** NAVIGATION ************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0;

}

nav ul { list-style: none; margin: 0 10px; padding: 0;

}

nav li { display: inline-block;

}

nav a { font-weight: 800; padding: 15px 10px; }

/*********************** Footer ************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; background-color: #272123; /width: 100%;/ height: 300px; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/*********************** PAGE: PORTFOLIO ************************/

gallery {

margin: 0; padding: 0; list-style: none;

}

gallery li {

float: left; width: 45%; margin: 2.5%; /background-color: #f5f5f5;/ color: #bdc3c7;

}

gallery img {

border-radius: 100px; width: 200px; height: 200px; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/*********************** PAGE: ABOUT ************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%;
}

/*********************** PAGE: Contact ************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { /* display: block; */ min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px;

}

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); } .contact-info li.twitter a { background-image: url('../img/twitter.png');
}

/*********************** colors ************************/

/* site body */ body { background-color: #fff; color: #999;

}

/* green header */ header { background: #6ab47b;

border-color: #599a68; }

/* logo text */ h1, h2 {

color: #fff; }

/* links */ a {

color: #6ab47b; }

/* nav background on mobile devices */ nav {

background: #599a68;

}

/* nav links */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav A:hover { color: #32673f;
}

about-me {

float: left; font-size:1.2em; text-align: left; margin: -5px 30px; width: 250px; }

social-icons {

float: left; }

2 Answers

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

Try adding this to your header

header { top: 0; }

then give your content wrapper a bit of margin at the top so it doesnt fall directly under your navbar.

#wrapper { margin: 150px auto 0 auto; }

Or whatever the height of the header/nav is.

Abdi Ahmed
Abdi Ahmed
7,151 Points
Abdi Ahmed
Abdi Ahmed
7,151 Points

That's worked perfectly!

Thank you so much!