Bootstrap 3.3.7更改导航栏中折叠堆栈的悬停/活动颜色?

时间:2018-05-28 02:00:47

标签: css twitter-bootstrap

使用Bootstrap v3.3.7

尝试使用以下页面自定义导航栏颜色: https://getbootstrap.com/docs/3.3/customize/

当导航栏向下折叠时,一切都有效,即:

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
    </button>

折叠后的图标栏显示如下(很好):

navbar with background color changed

但是,当我将鼠标悬停在图标栏上时,它们似乎已经褪色,即:

navbar collapsed - hover/active not working

显然需要调整悬停/活动背景和前景色,但需要更改的神奇LESS变量是什么?

目标是在悬停/点击等过程中保持条纹为白色,背景为蓝色

提前致谢。

3 个答案:

答案 0 :(得分:0)

不确定您是否可以通过自定义页面自定义它,但您可以通过css定位和覆盖按钮样式。我相信您必须指定使用哪个导航栏,因此如果您使用的是.navbar-default,那么您将执行以下操作:

.navbar-default .navbar-toggle:hover{
  background:none;
}

答案 1 :(得分:0)

尝试.navbar .navbar-header .navbar-toggle:focus, .navbar .navbar-header .navbar-toggle:hover { background-color: transparent; } 这样的

   @Override
        public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
            clients.inMemory().withClient("client_id").authorizedGrantTypes("password", "client_credentials")
                    .secret("secret").authorities("Authority1", "Authority2").scopes("READ", "WRITE").resourceIds("resource_server_id");
    }

答案 2 :(得分:0)

感谢两位回复的人 - 以下是诀窍:

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