navigation menu not working on mobile and tablet

any idea how to rectify this ? my navigation menu works fine on desktop

below is my additional CSS. please let me know should any of these code that causing the problem.

{
.cover p
color: #000000;
}
.image-bg h3, .image-bg h1 {
color: #000000;
}
.image-bg p, .image-bg li {
color: #000000;
}
/change menu height and color/
li.menu-item a {
font-size: 13px;
color: #000000;
}
/logo word size/
span.site-title {
font-size:100px;
}
/logo height/
.logo-carousel img {
max-height:120px;
}
img.logo{
min-height: 45px;
}
.logo-carousel img{
max-height:120px;
}
i.social_icon.fa {
color: #000000;
font-size: 25px;
}
p.mb40 {
background-color: #FFFFFF;
border-color: #FFFFFF;
color:#000000;
}
h3.mb32 {
color: #030303;
}
nav.main-navigation {
height: 55px;
border-color: #ffffff;
}
section.cfa-section.bg-secondary {
background-color: #ffffff;
}
h2.post-title a {
display: none;
}

to give you a clearer picture, attached image is the issue that im having at the moment with my website. none of the menu is working on tablet and mobile/phone.

please assist since i have no idea what went wrong.