Liens a href ne fonctionne pas + hover css ne fonctionne pas

Bonjour,

Je vous ecris ce message afin de vous faire parvenir un problème que je rencontre avec mon code, j'éspère pouvoir vous donner le plus d'informations possibles.

J'ai une navbar responsive qui s'adapte a la taille de l'écran, c'est a dire que le menu passe sur le coté quand l'écran devient trop petit, tout cela avec un peu de javascript (que je ne maitrise pas vraiment).
Les liens sur ma navbar fonctionnent normalement quand la page est en taille normale et quand la page est réduite le bouton pour afficher le menu fonctionne également. En revanche les liens sur ce menu sont impossible a utiliser, on ne peut pas cliquer dessus. Le pointeur ne change même pas de forme au :hover des liens.

Voici mon code Html :

<!-- HEADER RESPONSIVE NAV-->
    <header role="header">
        <nav class="menu" role="navigation">
            <div class="inner">

                    <div class="m-left">
                        <h1 class="logo">D3Volt WebGallery</h1>
                    </div>

                    <div class="m-right">
                        <a href="#"><i class="fas fa-home"></i> Home</a>
                        <a href="#">Gallery</a>
                        <a href="#">WeekPics</a>
                        <a href="#">About</a>
                    </div>

                    <div class="m-nav-toggle">
                        <span class="m-toggle-icon"></span>
                    </div>

            </div>
        </nav>
    </header>
<!-- HEADER RESPONSIVE NAV END -->

et ici mon css de base:

html, body{
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    overflow-x: hidden;

      background: url(../srcfiles/index/road-bg.jpg) no-repeat center fixed; 
      -webkit-background-size: cover; /* pour anciens Chrome et Safari */
      background-size: cover; /* version standardisée */

}
.inner{
    width: 80%;
    margin: auto;

}

ainsi que celui de ma navbar:

.menu{
    background: #aa2e25;
    width: 100%;
    height: 66px;
    line-height: 66px;
    overflow-y: hidden;
    overflow-x: hidden;
    position: fixed;
    z-index: 10000;

}
.logo{
    margin: 0;
    padding-bottom: -10px;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-size: 2em;
    letter-spacing: 1px;
}
.m-left{
    float: left;

}
.m-right{
    float: right;
}
.m-right a{
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0;
    margin: 0 10px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease-in-out;
    padding-bottom: 22px;
}
.m-right a:hover{
    border-bottom: 2px solid #fff;

}
.m-nav-toggle{
    display: none;
    width: 30px;
    height: 66px;

    display: none;
    align-items: center;
    float: right;
    cursor: pointer;

}
span.m-toggle-icon,span.m-toggle-icon:before,span.m-toggle-icon:after{
    content:"";
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    position: relative;

}
span.m-toggle-icon:before{top: 9px;}
span.m-toggle-icon:after{top: -11px;}

.m-right.is-open{
    transform: translateX(0%);
}
@media only screen and (max-width:700px){
    /*content*/
    .menu{
        position: unset;
    }
        .m-right{
        position: absolute;
        top: 66px;right: 0;
        width: 150px;
        height: 89%;
        background: #aa2e25;
        transform: translateX(100%);
        transition: all 0.3s ease-in;

    }
    .m-right a{
        display: block;
        text-align: center;
        padding: 0;margin: 20px;margin-top: 0px;margin-bottom: 0px;

    }

    .m-nav-toggle{
        display: flex;
    }
}
@media only screen and (max-width: 520px){
    /*content*/
    .logo{
        font-size: 1.5em;
    }
}

Je cherche a rendre les liens utilisables comme ceux de ma navbar en page de taille normale.
PS: j'ai déja essayé de retirer le position fixed et cela ne change rien.

Je vous remercie infiniement de votre attention si vous voulez m'aider.
Bonne soirée.