This fixed top menu is functioning correctly on desktop, but it's not working on mobile. How can I make it work on mobile devices?
Bootstrap and Font Awesome are being used.
Below is the code snippet:
<!-- Navigation -->
<header class="nav">
<div class="nav__holder nav--sticky">
<div class="container-fluid nav__container nav__container--side-padding">
<div class="flex-parent">
<div class="nav__header">
<!-- Logo -->
<a href="index.php" class="logo-container flex-child">
<img class="logo" src="img/ERRE_logo_2.png" srcset="img/ERRE_logo_2.png 1x, img/ERRE_logo_2.png 2x" alt="logo">
</a>
<!-- Mobile toggle -->
<button type="button" class="nav__icon-toggle" id="nav__icon-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="nav__icon-toggle-bar"></span>
<span class="nav__icon-toggle-bar"></span>
<span class="nav__icon-toggle-bar"></span>
</button>
</div>
<!-- Navbar -->
<nav id="navbar-collapse" class="nav__wrap collapse navbar-collapse">
<ul class="nav__menu">
<li class="nav__dropdown active">
<a href="index.php" aria-haspopup="true">Home</a>
<i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>
</li>
<li class="nav__dropdown">
<a href="portfolio-gallery.html" aria-haspopup="true">Portfolio</a>
<i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>
</li>
<li class="nav__dropdown">
<a href="#services" aria-haspopup="true">Services</a>
<i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>
</li>
</li>
<li class="nav__dropdown">
<a href="#contacts" aria-haspopup="true">Contacts</a>
<i class="ui-arrow-down nav__dropdown-trigger" role="button" aria-haspopup="true" aria-expanded="false"></i>
</li>
</ul> <!-- end menu -->
Any suggestions on how to resolve this issue?