Nav. menu CSS colours in hover and active state in mobile doesnt work, are not the same as in Desktop

Hi,

As You can see in the screenshots, the active/inactive and hover states on mobile (Hover not needed on mobile) are not the same as on desktop, and it should be,

someone know whats wrong with my code?

thanks!

this is the code

/* Nav item color */
.header-nav-item a {
    color: #aeaeae !important; 
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #2c2ae4 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #000000 !important;
}
.tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper .header-nav-item--active a {
    background-repeat: repeat-x;
    background-image: none!important;
}

@Eloi Your site is not accessible. You can find a detailed guide on sharing your site URL, even if it's not published, in this support article: https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords