2015-04-19 4 views
0

Для больших экранов меню гамбургеров прекрасно работает (изменена точка останова до 1200). На телефонах меню прекрасно работает.Меню Bootstrap Hamburger не отображает ССЫЛКИ, когда на iPad mini

На iPads меню гамбургеров отображается нормально, но когда вы нажимаете на него, параметры не отображаются! Пожалуйста помоги!!! Спасибо.

Вот HTML

<div class="navbar navbar-default navbar-fixed-top navbar-fixed-top-real" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <%= link_to situations_path do %> 
     <%= image_tag('A-Lister_Logo.png', class: "navbar-brand", height: '60', :alt => "A-Lister Logo") %> 
     <% end %> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="hidden-sm"> 
      <%= link_to 'Hot Situations', situations_path %> 
     </li> 
     <li class="hidden-sm"> 
      <%= link_to 'New Situations', newest_situations_path %> 
     </li> 
     <li class="hidden-sm"> 
      <%= link_to 'A-Listers', alisters_path %> 
     </li> 
     <li class="hidden-sm"> 
      <%= link_to 'Add Situation', new_situation_path %> 
     </li> 
     <% if !(user_signed_in?) %> 
      <li class="hidden-sm"> 
      <%= link_to('Become an A-Lister', new_user_registration_path) %> 
      </li> 
      <li class="hidden-sm"> 
      <%= link_to('Login', new_lister_session_path) %> 
      </li> 
     <% else %> 
      <li class="hidden-sm"> 
      <%= link_to(("My Situations"), my_situations_path) %> 
      </li> 
      <li class="hidden-sm"> 
      <%= link_to(("Edit Account"), edit_user_registration_path) %> 
      </li> 
      <li class="hidden-sm"> 
      <%= link_to('Logout', destroy_user_session_path, :method => :delete) %> 
      </li> 
     <% end %> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div> <!--/.navigation --> 

Вот CSS.SCSS

body { 
    font-family: 'Merriweather', serif; 
    color: black; 
    padding-top: 70px; 
} 

@media (max-width: 1200px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     background: white; 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
     line-height:0; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
} 

.navbar-fixed-top-real { 
    font-size:100%; 
    background: white; 
    border-bottom: 3px solid rgb(222,0,32); 
    max-height: 70px; 
    z-index:2; 
} 

.navbar-nav li a { 
    padding-top: 45px; 
    z-index:2; 
    font-size: 118%; 
} 

Спасибо за вашу помощь!

ответ

0

Все ваши классы li указаны как скрытые-sm, которые будут скрывать их на устройствах между рабочим столом и мобильным телефоном. Выньте этот класс, и он будет работать отлично.