Question

下午好！我目前正在使用导航栏，但是通过单击汉堡包图标（它会以较小的屏幕宽度显示所有链接/导航项）弹出的菜单有点过于花哨/在演示级别上不太好。如何自定义该下拉菜单以使其看起来更好？ HTML代码如下：

<nav id="navigation" class="navbar navbar-expand-sm">
  <a href="#" class="navbar-brand">Brand</a>
  <button id="hamburger-icon" class="navbar-toggler" data-toggle="collapse" data-target="#collap-menu">
    <span class="navbar-toggler-icon"><img src="D:\code\yannijewelry\images\evileyepng.png"></span>
  </button>
  <div id="collap-menu" class="collapse navbar-collapse">
    <ul class="navbar-nav ml-auto">
      <li><a class="nav-link" href="#">Etsy</a></li>
      <li><a class="nav-link" href="#">Facebook</a></li>
      <li><a class="nav-link" href="#">Instagram</a></li>
    </ul>
  </div>
</nav>

我定位什么元素，或者，如何自定义更好的下拉菜单？我注意到点击汉堡包图标时，还会在显示时将导航栏元素向上推

Answer 1

很难确切知道如何为您提供样式建议，因为我们无法仅通过HTML确切看到您当前正在查看的样式。利用核心的Bootstrap CSS，我可以大致了解您的观点并提出相应的建议。

假设您要更改每个菜单项的背景和文本颜色：

#collap-menu li{
  background: #666;
  padding-left: 20px;
}

#collap-menu li a{
  color: #fff;
}

这会将您的菜单项设置为带有白色文本的灰色背景，并为文本增加一些间距。您可以将这里的颜色替换为网站的品牌颜色。除了更改文本和颜色外，任何更改都需要在您的请求中明确列出。

Bootstrap折叠菜单/下拉菜单颜色问题

1 个答案: