如何使徽標居中和導航右對齊，然後堆放在頂部作爲響應

Question

我有一個問題得到的結果是由於徽標居中，然後導航右對齊並垂直居中在標題中，然後當它縮放直至響應模式，它將堆疊在另一個之上。我可以通過將導航位置設置爲絕對位置來獲得桌面模式的理想效果;但隨後它把我的響應式查詢搞糟了。

任何人有想法？

這裏是小提琴：http://jsfiddle.net/W37Wq/1/

HTML

<div class="header"> 
     <div class="header-inner"> 
      <a href="www.google.com"><img class="logo" src="http://www.techcityng.com/wp-content/uploads/2013/07/google.jpg"></a> 
      <nav> 
       <a href="#">Home</a> 
       <a href="#">About</a> 
       <a href="#">Let's Partner</a> 
       <a href="#">Contact</a> 
      </nav> 
     </div> 
    </div> 

    <header class="clearfix"> 

CSS

.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background: #f6f6f6; 
    z-index: 10000; 
    height: 100px; 
    overflow: hidden; 
} 

.header .header-inner { 
    width: 90%; 
    max-width: 69em; 
    margin: 0 auto; 
    padding: 0 1.875em; 
    text-align: center; 
} 

.header h1, 
.header nav a { 
    line-height: 100px; 
} 

.header h1 { 
    text-transform: uppercase; 
    color: #333; 
    letter-spacing: 4px; 
    font-size: 1em; 
    display: block; 
    block; 
    margin: 0 auto; 
    text-align: center; 
    float: none; 
    overflow: hidden; 
} 

.header nav { 
    display: inline-block; 
    text-align: right; 
    list-style: none; 
    margin-left: 5em; 
    position: absolute; 
} 

.header nav a { 
    color: #aaa; 
    font-weight: 700; 
    margin: 0 0 0 20px; 
    font-size: .9em; 
} 

.header nav a:hover { 
    color: #333; 
} 

.logo { 
    display: inline-block; 
    max-width: 198px; 
    max-height: 100px; 
} 

@media screen and (max-width: 55em) { 

    .header .header-inner { 
     width: 100%; 
    } 

    .header .logo, 
    .header nav { 
     display: block; 
     margin: 0 auto; 
     text-align: center; 
     float: none; 
    } 

    .header .logo, 
    .header nav a { 
     line-height: 50px; 
    } 

    .header nav a { 
     margin: 0 10px; 
    } 

    .header .logo, 
    .header.header-shrink nav a { 
     line-height: 45px; 
    } 

    .header .logo { 
     font-size: 2em; 
     max-height: 60px; 


    } 

    .header.header-shrink nav a { 
     font-size: 1em; 
    } 
} 

@media screen and (max-width: 32.25em) { 
    .header nav a { 
     font-size: .9em; 
    } 
} 

@media screen and (max-width: 24em) { 
    .header nav a, 
    .header.header-shrink nav a { 
     line-height: 1; 
    } 
} 

http://jsfiddle.net/W37Wq/1/

謝謝！

Answer 1

http://jsfiddle.net/W37Wq/4/

Chenge這個類：

.header { 
     position: fixed; 
     top: 0; 
     left: 0; 
     width: 100%; 
     background: #f6f6f6; 
     z-index: 10000; 
     height: 110px; 
     overflow: hidden; 
    } 

    .header .header-inner { 
     width: 90%; 
     margin: 0 auto; 
     padding: 0% 5%; 
     text-align: center; 
    } 

    @media screen and (max-width: 55em) { 

     .header .header-inner { 

     } 

     .header .logo, 
     .header nav { 
      display: block; 
      margin: 0 auto; 
      text-align: center; 
      float: none; 
      width:90%; 
     } 
    } 

Answer 2

只是在你的媒體查詢調用添加position:relative;：

@media screen and (max-width: 55em) { 

    .header .logo, 
    .header nav { 
     display: block; 
     margin: 0 auto; 
     text-align: center; 
     float: none; 
     position:relative; 
    } 
} 

http://jsfiddle.net/gGGLd