Currently utilizing "bootstrap": "~3.3.4" within the mean.js framework, I am facing an issue with the navbar dropdown menu. On desktop, everything functions as expected - the dropdown opens and remains open when the icon is clicked. However, once deployed to the staging server, the dropdown menu behaves differently on iPhone and Samsung Galaxy browsers. It either does not open at all or only partially opens before closing again.
Below is the code snippet:
<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">
<a data-ui-sref="authentication.signin" target="_self">SIGN IN</a>
</li>
</ul>
</nav>
</div>
Additionally, here is the CSS styling being used:
.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 have explored various solutions online but found no success. One suggestion was to replace the button element with a or input tag, however, this did not resolve the issue for me.
The problem occurs specifically on mobile devices (Galaxy and iPhone) where after clicking the hamburger menu icon, the navbar renders briefly but starts glitching upon navigating to a different page and attempting to reopen the menu.
If anyone has encountered a similar issue or has any insights, I would greatly appreciate it.