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

General Discussion

Posted by Jason Nelson
Jason Nelson
9,127 Points

Sticky navigation video/tutorial?

I could have sworn I seen a sticky navigation tutorial video on treehouse. I thought maybe it was in the weekly video's, but I only found one that briefly mentioned it. Can anyone confirm if there is one and if so can you link me? Thanks in advance!

2 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hi Jason,

This might be the video you're thinking about. https://teamtreehouse.com/forum/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2

Jason Nelson
Jason Nelson
9,127 Points

Thanks!

Jason Nelson
Jason Nelson
9,127 Points
Jason Nelson
Jason Nelson
9,127 Points

I finished the Javascript/Jquery section of this tutorial, but it's not making navigation bar move. I have posted my code below can someone tell me if It's not linked correctly? 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>HTML/CSS3 Responsive Theme</title>
  <meta charset="utf-8" />

  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="body">
  <header class="mainheader">
    <h1>This is a sticky Nav Demo</h1>

    <p>Creating one of these isn't so bad. Let's learn how with this sweet little demo!
    </p>
  </header>
  <nav class="main-nav">
    <a href="#">Nav Link 1</a>
    <a href="#">Nav Link 2</a>
    <a href="#">Nav Link 3</a>
    <a href="#">Nav Link 4</a>
  </nav>
  <div class="main">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Welcome to the 2014 this is going to be a great year. We will be profitable and learn new skills including programming!
    </p>

    <p>Welcome to the 2014 this is going to be a great year. We will be profitable and learn new skills including programming!
    </p>

    <p>Welcome to the 2014 this is going to be a great year. We will be profitable and learn new skills including programming!
    </p>

    <p>Welcome to the 2014 this is going to be a great year. We will be profitable and learn new skills including programming!
    </p>
  </div>
  <script type='text/javascript' 
            src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
  <script type='text/javascript' src='script.js'></script>
</body>
</html>

var mn = $(".main-nav");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

    $(window).scroll(function() {
        if( $(this).scrollTop() > hdr ) {
            mn.addClass(msn);
            } else {
                mn.removeClass(mns);
            }
    });
Jason Nelson
Jason Nelson
9,127 Points

script.js is what I named the javascript file

Jason Nelson
Jason Nelson
9,127 Points

css

* {
    box-sizing: border-box;
}

.body {
    margin: 0;
    padding-top: 250px;


}

header {
    height: 300px;
    padding-top: 50px;
    background: #f07057;

}

.main-nav,
.main {
    position: relative;
}

.main-nav {
    background: #fff;
    height: 80px;
    z-index: 150;
    margin-bottom: -80px;
    box-shadow: 0 2px 3px rgba(0,0,0,.4);
}

header,
.main-nav-scrolled {
    position: fixed;
    width: 100%;
    top: 0;
}

.main {
    background: #f2f2e8;
    padding: 110px 50px 50px;
    column-count: 2;
    column-gap: 40px;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    -webkit-columns: 2 auto;
    -moz-columns: 2 auto;

}


/* styles added from code pen */

body {
     font: 1em/1.5 sans-serif;
     color: #444135;
}
p {
     margin-bottom: 24px;
}
header, .main-nav {
   text-align: center;
}
header {
  color: #f7f8ee;
}
.main-nav a {
     font-size: .9em; 
     text-decoration: none;
     font-weight: bold;
     text-transform: uppercase;
     color: #444135;
    display: inline-block;
    margin: 24px 12px;
}
.main-nav a:first-child {
   border-top: 2px solid #f07057;
   padding-top: 10px;
}
.main h2 {
   column-span: all;
   -webkit-column-span: all;
   -moz-column-spam: all;