Sticky Navbar not working

Question

I have been trying to achieve a sticky navbar in my project, but somehow its not working. I can't get what's wrong here (PS: it doesn't even show up in my fiddle but does show in local files I'm building. )

Have been using twitter bootstrap 3.x. What might possibly be going wrong? A little help would be much appreciated.

Here's the code I'm implementing:

HTML:

<div class="container-fluid">

<h3>this is a title</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie posuere justo id condimentum. Morbi eu massa non enim varius lobortis vitae id massa. Aliquam congue consectetur nisi, sit amet tempus nunc mattis at. Aliquam non eleifend quam, ac accumsan urna. Nullam porta metus lacus, aliquam pretium purus rhoncus et. Donec in congue mi. Integer eu massa tincidunt, convallis diam in, ultrices lacus. Nulla bibendum metus sed enim faucibus, vel egestas tortor sollicitudin. Proin bibendum condimentum enim, ac luctus augue gravida et. Proin pretium tortor sed turpis gravida molestie. In hac habitasse platea dictumst.</p>
</div>
<div id="navi" class="navbar navbar-inverse visible-md visible-lg" role="navigation">
    <ul class="nav navbar-nav">
        <li><a href="#">Home</a>

        </li>
        <li class="active"><a href="#about">About me</a>

        </li>
        <li><a href="#resume">Resume</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
    </ul>
</div>
<p>lol Proin auctor turpis ac elit pharetra laoreet. Cras consequat mauris ut condimentum vulputate. Nunc faucibus viverra suscipit. Sed sit amet ante interdum libero malesuada adipiscing sed at erat. Praesent et tristique lorem. Vestibulum lobortis laoreet tortor eget pellentesque. Nam commodo nibh libero, in elementum mi lobortis ut. this is a title Pellentesque interdum, quam sit amet sagittis porttitor, nunc lorem aliquam lorem, varius laoreet lectus diam vel mi. Fusce ut justo a neque vestibulum aliquam ac at ante. Phasellus porttitor mollis semper. Cras ultricies augue augue, non consequat nisi laoreet et. Donec sapien erat, molestie in faucibus ut, dapibus id risus. Morbi nec lorem nulla. Suspendisse potenti. Ut congue purus vel tincidunt facilisis. Cras condimentum lorem a purus lacinia dignissim. Curabitur convallis, leo ut vestibulum feugiat, ante urna ullamcorper ipsum, et aliquam justo sem ac urna. Praesent rhoncus risus nec dignissim ornare. Sed nec tellus nibh. Nulla in mauris ac lorem mollis ultricies id et mauris.</p>

The CSS:

.fixed {
    position: fixed;
    top: 0;
    height: 50px;
    z-index: 180;
}

The jQuery

 $(document).ready(function(){
     $(window).bind('scroll', function() {
     var navHeight = $( window ).height() - 50;
       if ($(window).scrollTop() > navHeight) {
         $('#navi').addClass('fixed');
       }
       else {
         $('#navi').removeClass('fixed');
       }
    });
  });

The Fiddle Link

Thanks in advance

Answer 1

.visible-md and .visible-lg are hiding your nav bar, because with .visible-md and .visible-lg, your element will only be visible in desktop and large devices (desktops) and in jsfiddle, the viewport is small.

You can do the following to show your nav, but it won't be required if your site opens in parent frame. See your old fiddle in full screen result here: http://jsfiddle.net/x84PJ/5/embedded/result/ Your nav is visible here.

#navi { display: block !important;} /* use this only for jsfiddle result output, else your nav will break on medium and small devices*/

and also fix your jQuery code

$('nav').removeClass('fixed');

should be

$('#navi').removeClass('fixed');

For more detail on navbar try this: http://getbootstrap.com/examples/navbar/

Answer 2

Add the following code to your css

#navi{
 display: block!important;
}

It is because somehow bootstrap is making your nav display:none

Working Code