ブートストラップナビゲーションバー折りたたみメニューは、さまざまなホバー、アクティブな色

Question

HOVERを必要とし、FOCUS効果は、私はホバー色を選択する上で問題に直面しています

モバイルVIEWのために働いていないとクラスは、ナビゲーションバーの折りたたみ可能なメニューでアクティブのまま。モバイルビューでは黒色、デスクトップビューでは別のホバー効果が必要です。

私のデスクトップビューはうまくいきました。ホバー効果とモバイルビューのアクティブエフェクトを変更するだけで済みます。

@media only screen and (max-width: 767px) { 
 
.navbar-custom { 
 
    margin-top: -40px !important; 
 
    z-index: -1; 
 
} 
 
ul.nav.navbar-nav { 
 
    margin-top: 10px !important; 
 
} 
 
.collapsing, 
 
.in { 
 
    background-color: #CCCCCC; 
 
    text-align: center; 
 
} 
 
.collapsing ul>li>a, 
 
.in ul>li>a { 
 
    color: #FFFFFF!important; 
 
    text-shadow: #FFFFFF 0px 0px 0.5px!important; 
 
} 
 
    
 
.navbar-collapse>.navbar-nav>.active>a, 
 
.navbar-collapse>.navbar-nav>.active>a:hover, 
 
.navbar-collapse>.navbar-nav>.active>a:focus { 
 
    background-color: transparent; 
 
    color: black!important; 
 
    text-shadow: black 0px 0px 0.5px!important; 
 
} 
 
}

<nav class="navbar navbar-custom"> 
 
     <div class="container"> 
 
      <div class="collapse navbar-collapse" id="myNavbar"> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="active"><a href="#">Home</a></li> 
 
        <li><a href="#">About Us</a></li> 
 
        <li><a href="#">Education</a></li> 
 
        <li><a href="#">Teachers</a></li> 
 
        <li><a href="#">Contact Us</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav>

私の知る限りでは、物事のダースを試してみましたが、到達してからここに来ました。

Answer 1

のためにその内部にコードを記述する必要があり、問題があるため、「Zインデックス」を作成しました。 実際には、ホバー効果だけでなく、メニュー全体がモバイルビューで機能していなかったため、表示されました。

以前は、モバイルビューで余分な余白を隠すためにz-indexを使用していました。これによって、別のレイヤーがオーバーレイしてメニューの機能不全を引き起こしました。

私はここに私の更新CSSメディアクエリを添付しています

@media only screen and (max-width: 736px) { 
 
    .navbar-custom { 
 
     min-height: 0px; 
 
    } 
 
    .navbar-toggle { 
 
     margin-right: 0px; 
 
    } 
 
    .collapsing, 
 
    .in { 
 
     background-color: #CCCCCC; 
 
     text-align: center; 
 
    } 
 
    .collapsing ul>li>a, 
 
    .in ul>li>a { 
 
     color: #FFFFFF!important; 
 
     text-shadow: #FFFFFF 0px 0px 0.2px!important; 
 
    } 
 
    .navbar-collapse>.navbar-nav>.active>a, 
 
    .navbar-collapse>.navbar-nav>.active>a:hover, 
 
    .navbar-collapse>.navbar-nav>.active>a:focus { 
 
     background-color: transparent; 
 
     color: black!important; 
 
     text-shadow: black 0px 0px 0.2px!important; 
 
    } 
 
    .navbar-collapse>.navbar-nav>li>a:hover, 
 
    .navbar-collapse>.navbar-nav>li>a:focus { 
 
     background-color: transparent; 
 
     color: black !important; 
 
    } 
 
}

Answer 2

あなたは最後に、私はこの問題を解決しましたモバイル

@media only screen and (max-width: 500px) { 
    /* media screen styles*/ 
}