Problem with the Menu on mobile (not clickable)

Hey! 
I used a custom CSS code I found in the forum to bring my nav bar to the right. 
Now there's an issue on the mobile web version as the menu is not clickable anymore.

This is the code I've used:

#navigator header#topBar ul#nav {
    display: block;
    float: right;
   padding-right: 40px!important;
   padding-top: 45px!important;
}
@media screen and (max-width:640px) {
nav.main-nav.dropdown-hover {
    display: none;
}
section#container {
    margin-top: 85px !important;
}
div#mobileNav {
    float: right;
    position: relative;
   padding-right: 30px!important;
   padding-top: 12px!important;
    bottom: -5px;
}
.siteTitle * {
    font-size: 30px !important;
}
}

I hope you can help – thank you in advance 🙂

Also, if possible, I would like to use a burger menu on mobile that opens up full-screen when you click on it.

Here is an example:

https://www.pentagram.com

What is your site url? We can check problem easier

On 6/8/2023 at 9:41 AM, tuanphan said:

What is your site url? We can check problem easier

It is www.sarahkoester.com

Add this CSS under

div#mobileNav {
    z-index: 99999999999999;
}

Thank you – but it still doesn't fill up the whole screen like it's the case in the attached screenshots above…

Add this to custom css too

#mobile-navigation {
  min-height: 100vh;
}