Bootstrap navbar media query

Question

I have my dropdown menu styled for smaller devices/screen sizes by a media query, when the navbar is in uts full screen mode i have dropdown menus and some sub dropdown menus. This all works fine when in full screen mode, however when i am navigating through the navbar in a smaller device/screen size the sub dropdown menus do not appear? Does anyone know what im missing to enable these to appear.

Bootstrap overide and media query

       /* 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;
   }
   }

The site is at

   www.newbridges.co.uk

If anyone can shed some light on this that would be great

Thanks

Answer 1

your navbar is hidden under 960px due to bootstrap-responsive.

you can override this behaviour in your media query:

@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;
 }
}