创建响应式导航栏时遇到问题

难以使导航栏响应。由于期望的设计，我使用了两个具有图像的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

创建响应式导航栏时遇到问题

回答

相关问题