cannot click dropdown items on mobile - css

Question

I have a navbar like the one below:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid text-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
with CSS:
#media (max-width:768px) {
.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}
.navbar-default .navbar-collapse {
background: #eeeeee;
position: absolute;
width:100%;
top: 40px;
}
}
The navbar works properly on larger screens. The mobile screen is the problem. It works properly when used in desktops (i.e I have a mouse to click the links). However, when used using mobile devices (i used an iPhone), the links of the navbar are not working anymore. What's more, I cannot toggle the dropdown button anymore once I've clicked on something.
If it helps, here's the codepen link: codepen
EDIT: I found out now that the navbar is not working when I am using Safari on my iPhone. When viewed in Google Chrome it works just fine even if in mobile. Any ideas as to why it is not working in Safari? Thank you for your help.

Answer 1

Try updating your code with a wrapper div.
.nav-wrapper{
position: relative;
display: inline-block;
}
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid text-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="nav-wrapper">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
</nav>