1

メディアクエリによってデバイス/画面サイズが小さいようにドロップダウンメニューのスタイルを設定しています。ナビゲーションバーがフルスクリーンモードの場合、ドロップダウンメニューといくつかのサブドロップダウンメニューがあります。これはすべて、フルスクリーンモードでは正常に機能しますが、小さいデバイス/画面サイズでナビゲーションバーをナビゲートしているときに、サブドロップダウンメニューが表示されませんか？誰かがこれらを表示できるようにするために何が欠けているか知っていますか？

ブートストラップオーバーライドとメディアクエリ

       /* Media Queries */

       @media (max-width: 1024px) {
       .nav li { width: 100%; }
       .nav .dropdown ul {display:none; }
       .nav .open ul { display: block; }

      .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
       text-align: center;
       background-color:#211256;
       }



     .nav-collapse .nav > li > a:hover,
     .nav-collapse .dropdown-menu a:hover {
     background-color: #211256;
      color:white;

       }

     .navbar .nav > li  a:hover{
      color:white;
    }

     .navbar .nav .active > a, .navbar .nav .active > a:hover {
     background: #211256;
      color: white;
     text-decoration: none;
    }

   .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
   border-radius: 3px 3px 3px 3px;
   color: white;
    font-weight: bold;
    padding: 6px 15px;
    margin-bottom:2px;

   }

 .navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
  border-bottom-color: white;
  border-top-color: white;
  }


  .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active  >  .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
  background-color: transparent;
  color: #211256;
   }
   }

サイトはにあります

   www.newbridges.co.uk

誰かがこれに光を当てることができればそれは素晴らしいことです

ありがとう

4

1 に答える 1

3

ブートストラップに反応するため、ナビゲーションバーは960px未満で非表示になります。

メディアクエリでこの動作を上書きできます。

@media (max-width: 1024px) {
 .nav-collapse, .nav-collapse.collapse {
   overflow: visible !important;
   height: auto !important;
 }
 .navbar .btn-navbar {
   display:none;
 }

 .dropdown-menu li:hover .sub-menu {
   display: block !important;
   visibility: visible !important;
 }
}
于 2012-07-26T18:53:36.240 に答える