html - 在导航栏上设置 Bootstrap 移动菜单的样式

Question

我正在尝试从移动菜单[汉堡菜单]中删除轮廓和背景颜色。我只想要没有轮廓和背景颜色的水平 3 行。

这是我正在尝试的方法，但在没有悬停/聚焦时它仍然显示轮廓。

<nav class="navbar navbar-default">
         <div class="container">
                 <div class="navbar-header">
                         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                 <span class="sr-only">Toggle navigation</span>
                                 <span class="icon-bar"></span>
                                 <span class="icon-bar"></span>
                                 <span class="icon-bar"></span>
                         </button>
                         <a class="navbar-brand" href="index.html">abc</a>
                 </div>

                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                         <ul class="nav navbar-nav navbar-right">
                                 <li>
                                         <a href="index.html">Home</a>
                                 </li>
                         </ul>
                 </div>
         </div>
 </nav>

这是我正在应用的 css

 .navbar-default{
    background-color: #862f38;
}
.navbar-toggle:link,
.navbar-toggle:visited,
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus{
  background:none !important;
  border: none !important;
  outline: none !important;
}
@media screen and (max-width: 768px){
.navbar-toggle:link,
.navbar-toggle:visited,
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus{
  background:none !important;
  border: none !important;
  outline: none !important;
}

但我不知道为什么它不起作用。

在此先感谢您的帮助

Answer 1

你可以试试下面的简单代码

---

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
    background-color: transparent;
}
.navbar-default .navbar-toggle{
    border-color: transparent;
}