title: Changing padding top based on another element, using JQuery
body: <p>I'm trying to adjust padding-top so that page content will overflow
  based on the height of a menu, which changes responsively.
  What I have now doesn't work: when menu items collapse to two rows
  on a small screen size, the content overlays the menu and, of course,
  the menu's 2nd row doesn't have focus.</p>
  
  <pre><code>&lt;script&gt;  
  var heightHeader = $('.fixedheader').height();
  $('.scrollcontent').css({ paddingTop : heightHeader + 30 + 'px' });
  &lt;/script&gt;
  </code></pre>
  
  <p>Am I missing some code or misusing this?
  The non-working menu and content example is here <a href="http://jsfiddle.net/r5a4ah7p" rel="nofollow">http://jsfiddle.net/r5a4ah7p</a></p>
  
  <p>In my personal html, I call the library within the head tags (is that the correct location?):</p>
  
  <pre><code>&lt;script type="text/javascript"
  src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Additional question:</strong>
  When the javascript is contained in the html, should it be placed last,
  eg, after the appropriate  for the content?  That's what most
  web examples show.</p>
  
  <p>Many TIA.
  -murspieg</p>