un-fixing the position of the navbar in mobile view on Bootstrap with CSS and jQuery

The floating navbar on responsive/mobile Bootstrap templates has a fixed position. But when the menu becomes longer, I needed to make it ‘relative’ in position so that the person can scroll down the items to see the other links.

jQuery

function mobile_header() {
     /* on mobile, opening the menu scrolls to top and removed the 
    'fixed' positioning so that if the menu is longer, 
    the user can scroll to see the menu items */

                $('.btn-navbar').click(function(){
                    $('html, body').animate({ scrollTop: 0 }, "slow");
                    if($('.btn-navbar').hasClass('open')){ 
                        $('.navbar').removeClass('mobile');
                        $(this).removeClass('open');
                    }
                    else {
                        $('.navbar').addClass('mobile');
                        $(this).addClass('open');
                    }
                });
}

LESS

 .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      height: 60px;
      z-index: 99;

      &.mobile {
        position: absolute;
      }
    }

the zero (or negative) height problem of elements inside an initially hidden container

phew, that was a long title. But it took me a while to figure out too. basically, I was working on creating a grid with list elements having the same height. I had done this before on Save22’s older version, and had made a function for it:

  function same_height(container) {
            var items_height = [];

            $(container).each(function() { 
                items_height.push($(this).outerHeight());
            });

            var tallest_content = Math.max.apply( null, items_height );

            $(container).each(function(){
                var item_height = $(this).parent().height();
                $(this).css('height', tallest_content);
            });

        }

same_height('ul#cat-list li');

I’m using Foundation 4 for this project, and I initially put the grid behind a hidden Section tab.

The jQuery code wasn’t working. For hours I couldn’t figure out why, until Mark asked the right question: “is it initially hidden?” and pointed me to a fix someone had made:

https://coderwall.com/p/r855xw

Although I think it means I have to integrate the jQuery with the Section JS of Foundation if I want to keep it hidden, or code my own tabbed fix for this. It just meant: it wasn’t fast enough for me to implement via just the framework + my own code, as I had originally thought. But because I learned of the actual problem later in the day, I already created a different design compromise wherein I made the grid visible already, instead of being hidden.

I’ll see if I have time to make a real fix for this, since there are other pages/components I think I need to finish first.