Probleme beim Erstellen einer responsiven Navigationsleiste

Probleme beim Ansprechen der Navigationsleiste. Aufgrund des gewünschten Designs habe ich zwei Zeilen mit einem Bild dazwischen verwendet. Dies führt dazu, dass die Haltepunkte aufgrund des Li-Auffüllens in einer großen Größe auftreten. Ich möchte das Logo nach links verschieben und eine Dropdown-Schaltfläche hinzufügen, um die Optionen der Navigationsleiste anzuzeigen und gleichzeitig die obere Leiste bei einer mobilen Anzeigebreite zu entfernen. Jede Hilfe wäre sehr geschätzt, danke.Probleme beim Erstellen einer responsiven Navigationsleiste

<!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; 
        } 
       } 
      } 
     } 
    } 
}

Quelle

2017-08-10 Kevin Mangal

Vielleicht sollten Sie den Textvorschlag des Bootstrap folgen und vergessen Sie nicht, dass es die Ressourcen hinzuzufügen.

Quelle

2017-08-10 01:42:03 aanthraxx

@ anthrax-xarhtna dies ist keine Antwort und ist besser in den Kommentaren der Frage – KiwiPiet

würde ich gerne tun, aber wegen meiner aktuellen rep Ich kann nicht auf den Kommentar Abschnitt schreiben. Einen schönen Tag noch! – aanthraxx

Probleme beim Erstellen einer responsiven Navigationsleiste

Antwort

Verwandte Themen