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


Strange responsive layout, height + JS problem

Hi. I'm following a Lynda.com tutorial. My live site is: http://liveactionliving.com/myWebsite/ Codepen: http://codepen.io/pandathorax/pen/domyEy

There an JS coded h1 tag under the header displaying browser width, body width, e.g. "520 (487+33)..." The 487 in this example is the important number to watch (body width). The 33 is related to scroll bar, etc width.

My issue seems to be related to the browser and/ or header height because when the window is tall enough.

The 3 layout sizes are: 801px+ is large, 501-800px is medium, 50-500px is small, and at this point, the nav menu is supposed to disappear and be replaced by a drop-down mobile nav menu.

The weird thing is that from 484px-500px the mobile_menu anchor disappears.

I hope this isn't too confusing. Thanks.

/* JavaScript Document */

var windowSize = '';
var windowWidth = 0;
var actualSize = 0;

$(document).ready(function () {

    setInterval('checkBrowserSize()', 100);


function checkBrowserSize() {
    windowWidth = window.outerWidth;
    var contentWidth = $('body').width();
    var sizeDiff = windowWidth - contentWidth;
    actualSize = windowWidth - sizeDiff;

    if (actualSize > 800) { newWindowSize = 'large'; }
    if (actualSize <= 800 && actualSize > 500) {newWindowSize = 'medium'; }
    if (actualSize <= 500){ newWindowSize = 'small'; }
    $('h1').html(windowWidth +' ('+contentWidth+'+'+sizeDiff+')'+' is '+newWindowSize);

    if(windowSize != newWindowSize) {
        windowSize = newWindowSize;
            $('h1').append(' -- no change');


function loadHero() {
    if (windowSize == 'large') {
        $('nav').css('height', 'auto');

    if (windowSize == 'medium') {
        if( actualSize > 500 ) {
            $('nav').css('height', 'auto');
    if (windowSize == 'small') {
        if( actualSize <= 500 ) {
            $('nav').css('height', '0px');