css - bootstrap navbar dropdown does not work on iphone -


i using "bootstrap": "~3.3.4" inside mean.js framework. navbar dropdown menu not have problem opening , staying put when dropdown icon clicked on desktop. after getting pushed staging server, clicking icon on iphone , samsung galaxy browsers no longer opens dropdown menu or opens not stay opened.

here 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 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 @ other answers on site , googled issue. 1 answer came across suggested use or input instead of button, still faced same issue.

what happening in browser that, on button click (hamburger) (on galaxy , iphone) after code pushed staging server navbar renders, once menu item clicked, when go , click on hamburger menu again, navbar behave weird starting render , stopping , going immediately.

anyone has idea?

i have found solution myself. had set position of drop down "static" screens less 480px.

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

Comments

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -