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
Post a Comment