Question

我喜欢将突出显示的导航项更改为蓝色背景而不是蓝色边框下划线。查看屏幕截图

我的代码在这里：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
       <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" arial-expand="false">
              <i class="fa fa-bars"></i>
           </button>
            <a href="http://www.aspentech.com/" class="navbar-brand">
              <img class="img-responsive" src="img/logo@2x.png">
            </a>
        </div>
        <div class="login">
               <ul class="nav navbar-nav navbar-right">
                  <li class="active">
                  <a id="loginLink" href="#" class="navbar-text navbar-icon-link">
                  <span class="navbar-profile-icon center-block"></span>Hello, Sijie!</a>
                  </li>
               </ul>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav subnav-nav">
                <li class="subnav">
                  <span class="navbar-text subnav-link" id="subnav-link-1"><a class="sub" href="index.html">aspenOne Update Center</a></span>
                </li>
                <li class="subnav active">
                  <span class="navbar-text subnav-link" id="subnav-link-2"><a class="sub activated" href="download center.html">aspenOne Download Center</a></span>
                </li>
              </ul>
         </div>
      </div>
     </nav>

https://jsfiddle.net/Swathi56/cbe4jdg6/

Answer 1

试试这段代码：

.activated {
    background: none repeat scroll 0 0 #007ABD;
    color: white;
    height: 40px;
    cursor: pointer;
    -webkit-transition: border-color 0.8s;
    transition: border-color 0.8s;
    padding-bottom: 16px;
}

要将颜色从蓝色更改为白色，请添加以下内容：

.navbar-collapse .navbar-text.subnav-link a.activated {
    color: white;
}

要更改移动视图，您需要使用media queries。例如，对于小于600px的场景，媒体将如下所示：

@media (max-width: 600px) {
  .activated {
        background: none repeat scroll 0 0 #007ABD;
        color: white;
        height: 40px;
        cursor: pointer;
        -webkit-transition: border-color 0.8s;
        transition: border-color 0.8s;
        padding-bottom: 16px;
   }

   .navbar-collapse .navbar-text.subnav-link a.activated {
       color: white;
   }
}

如何在屏幕移动视图中将突出显示的导航项更改为蓝色背景而不是蓝色边框底部

1 个答案: