响应导航栏-CSS-HTML

到目前为止，我喜欢这个导航栏。 但我希望链接隐藏到一个有线条的下拉菜单按钮

将此菜单栏从FontAwesome集成到左侧的导航标题中，而不是链接列表中

<a onclick="javascript:showElement('thisneedscss')">
  <i class="fas fa-align-justify" style='font-size:22px'></i>
</a>

---

我可能已经解决了。我在medie之前添加了一个.leftsection，显示为：none；在@media之后，.leftsection是display:block；和。右侧部分显示：无

<nav>
  <a class="links logo" href="#">Logo</a>
  <div class="rightSection">
    <a class="selected links" href="h">Home</a>
    <a class="links" href="#">Contact Us</a>
    <a class="links" href="#">About Us</a>
    <a class="links" href="#">More Info</a>
    <a class="links" href="#">Register</a>
  </div>
</nav>

* {box-sizing: border-box;}

nav {
  overflow: hidden;
  background-color: #330b7c;
  padding: 10px;
}

.links {   
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;   
  font-weight: bold;   
  float: left;   
  color:white;   
  text-align: center;   
  padding: 12px;   
  text-decoration: none;   
  font-size: 18px;   
  line-height: 25px;   
  border-radius: 4px;
}

nav .logo {
  font-size: 25px;
  font-weight: bold;
}

nav .links:hover {
  background-color: rgb(214, 238, 77);
  color: rgb(42, 10, 94);
}

nav .selected {
  background-color: dodgerblue;
  color: white;
}

.rightSection {
  float: right;
}

@media screen and (max-width: 500px) {

  nav .links {
    float: none;
    display: block;
    text-align: left;
  }

 .rightSection {
   float: none;
 }
}