javascript - Responsive Menu not Displaying in Smartphone Default Browser? -


my responsive website when open in smartphone default browser responsive menu not displaying , when check smartphone chrome browser working fine . can me out of issue please ?

here code :

responsive css code here :

.navigation {     display: none; }  .mobi-menu {     display: block;     float: right;     width: 40px;     height: 40px;     position: absolute;     right: 30px;     bottom: -6px;     outline: none; }  .mobi-menu span {     position: absolute;     width: 20px;     height: 2px;     left: 10px;     -moz-transition: 0.4s ease;     -webkit-transition: 0.4s ease;     -ms-transition: 0.4s ease;     -o-transition: 0.4s ease;     transition: 0.4s ease; }  .mobi-menu span:nth-child(1) {     top: 13px; }  .mobi-menu span:nth-child(2) {     top: 50%;     margin-top: -1px; }  .mobi-menu span:nth-child(3) {     bottom: 13px; }  .mobi-nav-container {     display: block;     -moz-transition: 0.4s ease;     -webkit-transition: 0.4s ease;     -ms-transition: 0.4s ease;     -o-transition: 0.4s ease;     transition: 0.4s ease;     padding: 20px 30px 50px 50px;     width: 200px;     position: absolute;     right: 0px;     top: 140px;     visibility: hidden;     opacity: 0;     z-index: 999; }  .mobi-menu.open ~ .mobi-nav-container {     top: 100px;     opacity: 1;     visibility: visible; }  .mobi-menu.open span:first-child {     -moz-transform: rotate(45deg);     -webkit-transform: rotate(45deg);     -ms-transform: rotate(45deg);     -o-transform: rotate(45deg);     transform: rotate(45deg);     top: 19px; }  .mobi-menu.open span:nth-child(2) {     opacity: 0; }  .mobi-menu.open span:last-child {     -moz-transform: rotate(135deg);     -webkit-transform: rotate(135deg);     -ms-transform: rotate(135deg);     -o-transform: rotate(135deg);     transform: rotate(135deg);     bottom: 19px; }  .mobi-navigation { }  .mobi-navigation > li {     text-align: right;     padding: 0;     position: relative; }  .mobi-navigation > li {     position: absolute;     left: 0;     top: 12px;     font-size: 80%; }  .mobi-navigation ul {     display: none;     margin: 0; }  .mobi-navigation {     outline: none;     display: block;     padding: 5px 12px;     width: 100%;     font-size: 120%;     border-bottom-width: 1px;     border-bottom-style: dashed;     background-color: #993399;     z-index: 1; }  .mobi-navigation > li > { } 

here html code :

<div class="mobi-nav-container" style="min-height: 1209px;">    <ul id="menu-main-1" class="mobi-navigation">    <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8">       <a href="index.html">home</a>    </li>    <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-20">       <a href="">who ? <i class="fa fa-angle-down"></i></a>       <ul class="sub-menu" style="display: none;">          <li id="menu-item-185" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-185"><a href="genesis.html">the genesis </a></li>       </ul>    </li>    <li id="menu-item-209" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-209">       <a href="">what offer ? <i class="fa fa-angle-down"></i></a>    </li>    <li id="menu-item-418" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-418">       <a href="">what ? <i class="fa fa-angle-down"></i></a>       <ul class="sub-menu">          <li id="menu-item-210" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-210"><a href="">corporate identity  </a></li>          </li>          <li id="menu-item-419" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-418">             <a href="">how ? <i class="fa fa-angle-down"></i></a>             <ul class="sub-menu">                <li id="menu-item-289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-289"><a href="">the approach  </a></li>             </ul>          </li>          <li id="menu-item-475" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-475"><a href="contact.html">where locate us?  </a></li>       </ul>       <!--end mobile navigation-->       <div class="clear"></div> </div> 

thanks in advance.


Comments

Popular posts from this blog

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -