Header 區的 HTML 設計

  <section id="sec1">
    <header>
      <div>
        <a class="showMenu" href="#"><i class="fa fa-bars"></i></a>
        <img id="logo" src="images/logo.png" alt="">
      </div>

Header 區的 CSS 樣式設計

/* #sec1  ===================================================================== */
       
header .showMenu { display: none; }
        
/* 手機版(寬度小於1030) 的設計 */
@media( max-width: 1030px ){
 
  header { position: fixed; width: 100%; }
  header>div { height: 12vh; padding-left: 10vw; } 
  header #logo { height: 10vh; width: auto; padding-top: 1vh; }
  
  header nav { padding: 10px 0; display: none; height: 88vh;
    background-size: cover; background: url(images/mobile_nav_bg.jpg) center bottom;  }
  nav a { background-image: none; background-color: rgba(255, 255, 255, 0.1); 
    display: block; width: 100%; height: auto; padding: 10px; margin-bottom: 10px; font-size: 20px; }
  nav a:hover, nav a.active { color: yellow; padding-top: 10px; font-size: 20px; letter-spacing: 4px; }
  
  header .showMenu { display: block; position: absolute; left: 0; top: 0;
    color: #FFF; font-size: 25px; padding: 10px; }
        
} 

加上程式判斷手機版的按鈕

    //手機版時#showMenu切換封面&選單出現==================================================
    $('.showMenu').on('click',function(){
      $('header>nav').fadeToggle(500);
    });
       
    //當視窗調整大小時=======================================================================
    $(window).resize(function(){
      if( $('.showMenu').is(':hidden') ){
        $('header nav').show(); //桌機版時一定出現
      }else{
        $('header nav').hide(); //手機版時一定隱藏
      }
    });