I am having issues making menu list appear on responsive navbar. The links/list items aren’t showing. I am able to open and close menu on mobile version. And The menu list appears well on desktop but not on mobile version.
Thank you for your help
HTML CODE
<!-- ##### Header Area Start ##### -->
<header class="header-area">
<!-- Top Header Area -->
<!-- Navbar Area -->
<div class="credit-main-menu" id="sticker">
<div class="classy-nav-container breakpoint-off">
<div class="container">
<!-- Menu -->
<nav class="classy-navbar justify-content-between" id="creditNav">
<!-- Navbar Toggler -->
<div class="classy-navbar-toggler">
<span class="navbarToggler"></span>
</div>
<!-- Menu -->
<div class="classy-menu">
<!-- Close Button -->
<div class="classycloseIcon">
<div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
</div>
<!-- Nav Start -->
<div class="classynav">
<!-- Logo Area -->
<div class="logo">
<a href="index.html"><img src="img/core-img/logo.png" alt="" width="80px" height="63px"> BRAND TITLE</a>
</div>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="how-it-works.html">HOW IT WORKS</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.php">CONTACT US</a></li>
</ul>
</div>
<!-- Nav End -->
</nav>
</div>
</div>
</div>
</header>
<!-- ##### Header Area End ##### -->
CSS CODE
.classynav .logo {
background-color: #ffffff;
padding-right:20px;
padding-top: 13px;
padding-bottom: 9.5px;
position: fixed;
top: 0;
left: 0;
width: 30%;
clip-path: polygon(100% 0, 100% 0, 86% 100%, 0 100%, 0 0);
}
.classynav .logo a {
color: #b00b1b;
font-size: 18px;
font-weight: 800;
}
/* Mobile/Tablet Nav CSS */
.breakpoint-on .classycloseIcon {
display: block; }
.breakpoint-on .classy-navbar-toggler {
display: block; }
.breakpoint-on .classy-navbar .classy-menu {
background-color: #ffffff;
position: fixed;
top: 88px;
left: -310px;
z-index: 1000;
width: 200px;
height: 50%;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
padding: 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
display: block;
overflow-x: hidden;
overflow-y: scroll;
}