bootstrap navbar выпадающее меню не работает на iphone

Question

Я использую «bootstrap»: «~ 3.3.4» внутри рамки mean.js. Выпадающее меню navbar не имеет проблем с открытием и оставлением, когда на рабочем столе щелкнут значок выпадающего меню. Но после того, как вы попали на промежуточный сервер, нажатие значка на браузерах галактик iphone и samsung больше не открывает раскрывающееся меню или иногда открывает его, но оно не остается открытым.

Вот код:

<div class="landing-page-header"> 

    <div class="navbar-header" > 
    <button class="navbar-toggle mytoggle" type="button" data-ng-click="toggleCollapsibleMenu()"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
     <a data-ui-sref="home" class="navbar-brand"> 
     <img class="header-logo" ng-src="modules/core/img/home/myimg.png" height=""> 
     </a> 
    </div> 
    <nav class="collapse navbar-collapse" data-ng-show="!authentication.user" collapse="!isCollapsed" role="navigation"> 
    <ul class="nav navbar-nav navbar-right landing-page-nav" data-ng-hide="authentication.user"> 
     <li class="text-center" data-ng-repeat="item in menu.items | orderBy: 'position'" 
     data-ng-if="item.roles.indexOf('guest') !== -1" 
     ng-switch="item.type" 
     data-ng-class="{active: $state.includes(item.state)}" 
     class="{{item.class}}" 

     target="{{item.target}}" 
     dropdown="item.type === 'dropdown'"> 
      <a ng-switch-when="dropdown" class="dropdown-toggle"> 
      <span data-ng-bind="item.title"></span> 
      <b class="caret"></b> 
      </a> 
      <ul ng-switch-when="dropdown" class="dropdown-menu"> 
      <li data-ng-repeat="subitem in item.items | orderBy: 'position'" data-ng-if="subitem.shouldRender(authentication.user);" data-ui-sref-active="active"> 
       <a data-ui-sref="{{subitem.state}}" data-ng-bind="subitem.title"></a> 
      </li> 
      </ul> 
      <a ng-switch-default data-ui-sref="{{item.state}}" data-ng-bind="item.title"></a> 
     </li> 
     <li class="divider-vertical"></li> 
     <li class="text-center " data-ui-sref-active="active"> 
      <a data-ui-sref="authentication.signin" target="_self">SIGN IN</a> 
     </li> 
    </ul> 

    </nav> 
    </div> 

А вот CSS:

.landing-page-header { 
     position: fixed; 
     left: 0px; 
     top: 0px; 
     opacity: 0.9; 
     background: #111; 
     width:100%; 
     height: 5em; 
     z-index: 99; 
     margin-bottom: 10em; 
} 

.navbar-brand img { 
    /*background: #fff;*/ 
} 
.landing-page-header ul { 
    background: #111; 
    margin-right:0.5em; 


} 

Я посмотрел на другие ответы на этом сайте и гугле вопрос. Один из ответов, с которыми я столкнулся, предложил использовать вместо кнопки кнопку «или», но я все еще сталкивался с той же проблемой.

Что происходит в браузере, это то, что при нажатии кнопки (гамбургер) (на галактике и iphone) сразу же после того, как код переместится на промежуточный сервер, отображается навигационная панель, но после нажатия на элемент меню, когда вы идете назад и снова нажмите на меню гамбургера, навигационная панель будет вести себя странно, начиная снимать и останавливаться и немедленно возвращаться.

У кого-нибудь есть идеи?

Answer 1

Я сам нашел решение. Мне просто нужно было установить положение понижения до «статического» для экранов размером менее 480 пикселей.

@media (max-width: 480px) { 
     .landing-page-header ul{ 
      position: static; 
      width:100%; 
     } 
    }