bootstrap navbar dropdown does not work on iphone

Question

I am using "bootstrap": "~3.3.4" inside the mean.js framework. The navbar dropdown menu does not have any problem opening and staying put when the dropdown icon is clicked on desktop. But after getting pushed to the staging server, clicking the icon on the iphone and samsung galaxy browsers no longer opens the dropdown menu or it sometimes opens it but it does not stay opened.

Here is the code:

 <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>

And Here is the 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;


}

I had looked at other answers on this site and googled the issue. One answer I came across suggested to use a or input instead of button, but I still faced the same issue.

What is happening in the browser is that, on button click (hamburger) (on galaxy and iphone) immediately after the code is pushed to the staging server the navbar renders, but once a menu item is clicked, when you go back and click on the hamburger menu again, the navbar will behave weird starting to render and stopping and going back immediately.

Anyone has any idea?

Answer 1

I have found a solution for it myself. I just had to set the position of the drop down to "static" for screens less than 480px.

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