title: Menu with line-height makes menu dissappear on zoom
body: <p>I have a fixed header with a menu floated on the right (<a href="http://outletdokkum.nl/nofcom/" rel="nofollow">http://outletdokkum.nl/nofcom/</a>)</p>
  
  <p>This menu uses Line-height to vertically center in the header bar. It's working great but there's one problem. I'm working on the responsive styles now and when I zoom to a certain point the menu dissapaears and I can't find it on the page. </p>
  
  <p>I think it's a problem with the line-height but I'm not sure. I use Jquery to scale when scrolling down.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;header id="header_nav"&gt;
      &lt;div id="header-wrap"&gt;
          &lt;section id="branding"&gt;
              &lt;a href="&lt;?php echo get_bloginfo('url'); ?&gt;"&gt;&lt;img src="http://outletdokkum.nl/nofcom/wp-content/uploads/2014/05/logo-transparent.png" class="brand-img" alt="logo-nofcom"/&gt;&lt;/a&gt;
          &lt;/section&gt;
  
          &lt;nav id="menu" role="navigation"&gt;   
              &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'main-menu' ) ); ?&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#header_nav {
  width:100%;
  height:120px;
  background-color:rgb(255,255,255);
  position:fixed;
  top:0;
  left:0;
  z-index: 9999;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  line-height: 120px; 
  -webkit-box-shadow: 0px 0px 6px 1px #cccccc;
  -moz-box-shadow: 0px 0px 6px 1px #cccccc;
  box-shadow: 0px 0px 6px 1px #cccccc;
  }
  
  #header-wrap{
  width: auto;
  max-width: 1060px;
  margin: 0 auto;
  }
  
  #branding{
  width: auto;
  margin: 0 auto;
  }
  
  .brand-img{
  float: left;
  margin: 0 auto;
  width: auto;
  height: 120px;
  max-height: 120px;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  }
  
  #menu{
  width: auto;
  margin: 0 auto;
  font-weight: 500;
  font-size: 18px;
  color: #444444;
  z-index:9999;
  }
  
  #menu ul{
  float: right;
  }
  
  #menu ul li{
  float: left;
  padding: 0 10px 0 10px;
  }
  
  #menu ul li a{
  color: #444444;
  }
  
  #menu ul li a:hover{
  color: #000000;
  cursor: pointer;
  }
  
  #menu li.current_page_item{
  font-weight: 700;
  color: #000000;
  }
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>&lt;script&gt;
  $(function(){
      $('#header_nav').data('size','big');
  });
  
  $(window).scroll(function(){
      if($(document).scrollTop() &gt; 100)
      {
          if($('#header_nav').data('size') == 'big')
          {
              $('#header_nav').data('size','small');
              $('#header_nav').stop().animate({
                  "height":"80px",
                  "line-height":"80px"
              },300);
  
          /*
              $('#slider').data('size','big');
              $('#slider').stop().animate({
                  marginTop:'80px'
              },300);
          */
  
          }
      }
      else
      {
          if($('#header_nav').data('size') == 'small')
          {
              $('#header_nav').data('size','big');
              $('#header_nav').stop().animate({
                  "height":"120px",
                  "line-height":"120px"
              },300);
  
          /*
              $('#slider').data('size','big');
              $('#slider').stop().animate({
                  marginTop:'120px'
              },300);
          */
          }  
      }
  });
  
  $(function(){
      $('.brand-img').data('size','big');
  });
  
  $(window).scroll(function(){
      if($(document).scrollTop() &gt; 100)
      {
          if($('.brand-img').data('size') == 'big')
          {
              $('.brand-img').data('size','small');
              $('.brand-img').stop().animate({
                  height:'80px'
              },300);
          }
      }
      else
      {
          if($('.brand-img').data('size') == 'small')
          {
              $('.brand-img').data('size','big');
              $('.brand-img').stop().animate({
                  height:'120px'
              },300);
          }  
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I hope it's clear what I mean. Try resizing your browser windows to see the colors change to blue/green/red (responsive) The menu is gone from the blue part.</p>