The hamburger-menu that appears in mobile devices works good in Android. But in ios (not the desktop responsive browser, but the actual apple device) it seems to be invisible but on click is still functioning as its options can still be clicked and we navigate to another page.
The site link is attached for reference as follows: CumminsFest.in
I have checked out for many such problems before, all are stating that they are related to:
{
- z-index
- webkit-overflow-scrolling:touch
- overflow:hidden
}
But none of them seems to work, one of the reasons being I might be doing something wrong.
My code for menu is:
(function($) {
$('.hamburger-menu').on('click', function() {
$(this).toggleClass('open');
$('.site-navigation').toggleClass('show')
});
})(jQuery).site-header {
position: relative;
width: 100%;
}
/*------------------------------------------------------------
## header-bar
------------------------------------------------------------*/
.site-header .header-bar {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
padding: 20px 0;
text-align: center;
background: black ;
}
.header-bar .site-branding {
margin-bottom: 0;
font-size: 30px;
font-weight: 800;
}
.header-bar .site-branding a {
color: hsl(0, 0%, 100%);
text-decoration: none;
}
/*------------------------------------------------------------
### site-navigation
------------------------------------------------------------*/
/*
Hamburger Menu
----------------------------------------*/
.hamburger-menu {
position: relative;
width: 100%;
max-width: 24px;
height: 22px;
margin-left: auto;
transition: .5s ease-in-out;
cursor: pointer;
}
.hamburger-menu span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #fff;
border-radius: 10px;
opacity: 1;
left: 0;
transition: .25s ease-in-out;
}
.hamburger-menu span:nth-child(1) {
top: 2px;
}
.hamburger-menu span:nth-child(2),
.hamburger-menu span:nth-child(3) {
top: 10px;
}
.hamburger-menu span:nth-child(4) {
top: 18px;
}
.hamburger-menu.open span:nth-child(1) {
top: 18px;
width: 0;
left: 50%;
}
.hamburger-menu.open span:nth-child(2) {
transform: rotate(45deg);
}
.hamburger-menu.open span:nth-child(3) {
transform: rotate(-45deg);
}
.hamburger-menu.open span:nth-child(4) {
top: 18px;
width: 0;
left: 50%;
}
.site-navigation {
position: absolute;
top: -11px;
right: 15px;
z-index: 9999 !important;
width: 100%;
height: 22px;
overflow-x: hidden;
list-style: none;
transition: all .35s;
color: hsl(0, 0%, 100%);
}
.site-navigation.show {
height: auto;
}
.site-navigation ul {
position: fixed;
top: 0;
left: -320px;
z-index: 9999 !important;
width: 250px; /*adddddd for cross of hamburger*/
height: 100vh;
overflow-x: scroll;
padding: 10px;
margin: 0;
background: #050505;
transition: all 0.35s;
}
.site-navigation.show ul {
left: 0;
}
.site-navigation ul li {
display: block;
padding: 15px 0;
}
.site-navigation ul li a {
display: block;
color: #fff;
transition: all 0.35s;
text-decoration: none;
font-size: 14px;
padding-left: 0px;
}
@media screen and (min-width: 992px) {
.site-navigation ul li a {
padding-left: 40px;
}
.header-bar .site-branding {
margin-left: 35px;
}
.site-navigation {
position: relative;
top: auto;
right: auto;
height: auto;
padding-right: 35px;
background: transparent;
z-index: 9999 !important;
}
.site-navigation ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
position: relative;
top: auto;
left: auto;
width: 100%;
height: auto;
padding: 0;
overflow: auto;
background: transparent;
z-index: 9999 !important;
}
.site-navigation ul li {
padding: 0;
}
.site-navigation ul li a {
color: #fff;
}
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="site-header">
<div class="header-bar">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-10 col-lg-4">
<h1 class="site-branding flex">
<a href="index.html">INNOVATION</a>
</h1>
</div>
<div class="col-2 col-lg-8">
<nav class="site-navigation">
<div class="hamburger-menu d-lg-none">
<span onclick="void(0)"></span>
<span onclick="void(0)"></span>
<span onclick="void(0)"></span>
<span onclick="void(0)"></span>
</div><!-- .hamburger-menu -->
<ul>
<img id="mylogo" src="img.jpeg" height="130" width="130">
<li><a href="index.html">HOME</a></li>
<li><a href="index.html#redirect1">EVENTS</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">SPONSORS</a></li>
<li><a href="#">ACCOMODATION</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">ABOUT</a></li>
</ul><!-- flex -->
</nav><!-- .site-navigation -->
</div><!-- .col-12 -->
</div><!-- .row -->
</div><!-- container-fluid -->
</div><!-- header-bar -->
</header><!-- .site-header -->Any help is really appreciated.
It seems to have to do with height: 22px; and overflow-x: hidden; set on .site-navigation class.
Removing those two lines resolved the issue on my iPhone. See this CodePen for reference https://codepen.io/baadaa/pen/WNbmoNK
(SUGGESTION) Also, for visibility toggle, I'd recommend transform: translateX(-320px); and transform: translateX(0); instead of left:. For performance reasons.