Question

I have built a site with a header that is fixed over top of the design so it is ever present throughout the site. Problem is I have had to make the container of the header and dock tall enough to accommodate the drop state. This is almost working correctly but now some of the page is not clickable due to the header/dock overlaying… This is a css issue and the way the header/doc was built. I am not sure there is another way to do this. If anyone would like to chime in on ideas or a solution that would be wonderful.

The container has overflow hidden on it so when in the drop state the play all videos gets cut off. Play around in firebug and you will see my dilemma.

This is the actual JS but is not quite working correctly as I have been unable to move the dock back up after many different tries..

$('#play-the-series').click(function(){
            $('#main-nav #content').animate({
                    top: '0'
                }, 1000, 'jswing');
        });

here is the link to the site: http://www.districtdesigngroup.com/basho/

This is a tough one so I commend anyone who wants to take a crack at it.
Thanks

Answer 1

Basically you’ll want to make the #main-nav element only 195px height with CSS, then at the same time you animate +200px on the top of the inner element, you should expand the height of #main-nav 200px as well. Do the opposite when collapsing the header.

Try this code:

$('#play-the-series').click(function(){
  // check for a "open" class on the main-nav
  if (!$("#main-nav").hasClass('open')) {

    // your animation
    $('#main-nav #content').animate({
      top: 0
    }, 1000, 'jswing');

    // container animation
    $('#main-nav').animate({
      height: 395
    }, 1000, 'jswing');

    // add class to main-nav
    $("#main-nav").addClass('open');

  } else {

    //reverse everything:

    $('#main-nav #content').animate({
      top: -200
    }, 1000, 'jswing');
    $(this).addClass('open');

    $('#main-nav').animate({
      height: 195
    }, 1000, 'jswing');

    $("#main-nav").removeClass('open');
  }
});

Alternatively you could make use of absolute positioning within the #main-nav element, but then you’d have to make changes to your markup and make a ton of other new CSS edits