css - Bootstrap hamburgermenu (collapse in) visibility issue on IOS (Safari) -
i have responsive webapp uses bootstrap. when mobile-size hamburger menu shows in header.
when clicked on pc/mac/android phone displays correctly.. when clicked ios-safari, shows quarter of second, , hides again. suspect height or z-index issue i'm not sure, , have not been able solve it.
you can try on www.gjovikhk.no.
anyways.. here html code header , menu :
<div id="menu" class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div id="logo" class="logo-placeholder"> <a href='default.aspx'> <img runat="server" id="imgclublogo" src="" /></a> </div> </div> <div class="navbar-collapse collapse" style="z-index:9999999999"> <ul class="nav navbar-nav navbar-left menu-row" style="margin-top: 5px;"> <li class="nav"> <asp:linkbutton runat="server" id="lnkloginmobile" text="login" href="/login" /> </li> <li class="nav"> <asp:linkbutton runat="server" href="/viewaboutus" id="lnkaboutusmobile" text="om ghk" /> </li> <li class="nav"> <a href="#" runat="server" id="lnkpersonalmobile" style="display: none"><i style="padding-right: 5px" class="glyphicon glyphicon-star-empty"></i>mitt lag</a> </li> <li class="nav"> <a href="forum.aspx?type=1" runat="server" id="lnkcoachforummobile" style="display: none"><i style="padding-right: 5px" class="glyphicon glyphicon-star-empty gly-spin"></i> trenerforum</a> </li> <li class="nav"> <div style="float: left; color: lightyellow; width: 18px; padding-top: 16px" class="glyphicon glyphicon-star-empty" runat="server" id="starpersonalmobile" clientidmode="static" visible="false"> </div> <div style="float: left"> <div class="dropdown" runat="server" id="ddlpersonalmobile" clientidmode="static" visible="false" style="display: inline-block"> <a class="dropdown-toggle" id="menu3mobile" data-toggle="dropdown" style="color:darkgreen!important"> mine lag </a> <ul class="nav navbar-nav dropdown-menu" role="menu" aria-labelledby="menu1"> <asp:listview runat="server" id="lvcoachesteamsmobile" itemtype="servicelayer.team" onitemcommand="lvteams_onitemcommand"> <itemtemplate> <li role="presentation"> <asp:linkbutton runat="server" id="lnknavdep" style="color:darkgreen!important" text='<%# item.name %>' commandargument='<%# item.id %>' commandname="navigatetoteam" /> </li> </itemtemplate> </asp:listview> </ul> </div> </div> </li> <li class="nav"> <asp:linkbutton runat="server" href="/teamoverview" id="lnkteamoverview" text="lag" /> </li> <li class="nav"> <asp:linkbutton visible="false" runat="server" href="/adminpage" id="lnkadminpage" text="admin" /> </li> <li class="nav" style="display: none"> <asp:linkbutton visible="false" runat="server" href="/eventcalendar" id="lnkteamoverviewmobile" text="eventkalender" /> </li> <li class="nav"> <asp:linkbutton runat="server" id="lnklogoutmobile" text="logg ut" onclick="lnklogoutmobile_onclick" visible="false" /> </li> </ul> </div> <div class="navbar-icon-topright"> <div style="float: right; margin-top: -8px; margin-right: 10px"> <button id="contacttrigger" type="button" class="btn btn-warning btn-circle btn-lg contact-trigger"><i class="glyphicon glyphicon-earphone"></i></button> <%--<img id="contacttrigger" src="content/images/icon-contact.png">--%> <asp:loginview runat="server" viewstatemode="disabled" id="loginview"> <loggedintemplate> <ul class="nav navbar-nav navbar-right"> <li><a runat="server" href="~/userconfig.aspx" title="manage account"> <div style="float: left"> <div class="avatar-container" style="height: 30px; width: 30px; margin-top: -5px"> <img class="avatar" runat="server" id="loginavatar" src="" style="height: 30px; width: 30px" /> </div> </div> <div style="float: left; padding-left: 10px; color: #333"> hei <%: context.user.identity.getusername() %> <span class="btn btn-success btn-xs glyphicon glyphicon-user"></span> </div> </a></li> </ul> </loggedintemplate> </asp:loginview> </div> </div> </div>
Comments
Post a Comment