title: Top menu bar and padding-top when resized?
body: <p>I have a top menu bar that is in position fixed and contains some text.  When the screen is resized smaller it compresses and it's height increases to fit the text.</p>
  
  <p>I have a div below the top menu bar that contains my website content, moved down using padding-top.</p>
  
  <p>When the top menu bar resizes the top of the article gets covered by the height change of the top menu bar.</p>
  
  <pre><code>#topmenubar{position:fixed;width:100%;text-align:center;word-wrap:normal;}
  
  #content {padding-top:40px;}
  </code></pre>
  
  <p>What is the best way around this so the resized top menu bar does not cover my content?</p>
  
  <p>The Top menu bar has to always be visible at the top of the screen, so I guess how can I make the padding-top get bigger with the screen width getting smaller or another solution?</p>