創建響應式導航欄時遇到問題

難以使導航欄響應。由於期望的設計，我使用了兩個具有圖像的ul。這會導致斷點以較大的尺寸發生，這是因爲li填充。我想將徽標移動到左側，並添加一個下拉按鈕以顯示導航欄選項，並以移動顯示寬度刪除頂部欄。任何幫助將不勝感激，謝謝。創建響應式導航欄時遇到問題

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Scalisi Skincare</title> 
    <link rel="stylesheet" type="text/css" href="build/css/styles.css"> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
</head> 
<body> 
    <header> 
     <div class="topbar"> 
      <a href="#">GIVE $10, GET $10</a> 
      <a href="#">FREE SHIPPING AND FREE RETURNS ON ORDERS OVER $50+</a> 
      <a class="right" href="#">MY ACCOUNT</a> 
     </div> 
     <nav> 
      <ul class="firstNavSection"> 
       <li><a href="#">BOB'S CREAM</a></li> 
       <li><a href="#">SCALISI SKINCARE</a></li> 
       <li><a href="#">TINTED</a></li> 
      </ul> 
      <a href="#"><img src="assets/logo.PNG" alt="SCALISI"></a> 
      <ul class="secondNavSection"> 
       <li><a href="#">REVIEW</a></li> 
       <li><a href="#">ABOUT</a></li> 
       <li><a href="#">BLOG</a></li> 
       <li><a href="#"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a></li> 
       <li><a href="#"><i class="fa fa-shopping-bag fa-2x" aria-hidden="true"></i></a></li> 
      </ul> 
     </nav> 
    </header> 

</body> 
</html>

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

header { 
    .topbar { 
     display: flex; 
     justify-content: space-between; 
     background: #7C8DC0; 
     padding: 8px 100px; 
     a { 
     text-decoration: none; 
     color: white; 
     flex: 1; 
     font-family: calibri; 
     font-size: 1em; 
     } 
     .right { 
     text-align: right; 
     } 
    } 
    nav { 
     border: 1px solid #dae3e5; 
     .firstNavSection { 
      display: inline-block; 
      position: relative; 
      top: -10px; 
      li { 
       display: inline-block; 
       list-style: none; 
       padding: 0 60px; 
       a { 
        font-family: calibri; 
        font-size: 1.5em; 
        text-decoration: none; 
        color: black; 
       } 
      } 
     } 
     a { 
      img { 
       display: inline-block; 
       position: relative; 
       top: 10px; 
      } 
     } 
     .secondNavSection { 
      display: inline-block; 
      position: relative; 
      top: -10px; 
      li{ 
       display: inline-block; 
       list-style: none; 
       padding: 0 60px; 
       a { 
        font-family: calibri; 
        font-size: 1.5em; 
        text-decoration: none; 
        color: black; 
        i { 
         color: #7C8DC0; 
        } 
       } 
      } 
     } 
    } 
}

來源

2017-08-10 Kevin Mangal

也許你應該遵循引導的樣板，不要忘了加上它的資源。

來源

2017-08-10 01:42:03 aanthraxx

@ anthrax-xarhtna這不是一個答案，更適合於問題的評論部分 – KiwiPiet

會喜歡這樣做，但由於我目前的代表，我不能寫在評論部分。祝你今天愉快！ – aanthraxx

創建響應式導航欄時遇到問題

回答

相關問題