mobile menu color

Good morning.
I think I have read all articles dedicated to css on mobile and I can't find the solution.
My problem is that in the mobile version the menu is not legible.
I tried to make some changes using css, but I encountered a problem.

When I add:

@media (max-width: 768px) {
    .main-navigation {
        background-color: rgba (0,0,0,0.6);
    }
}

This changes the color under the logo and mobile menu. Perfect!
However, when I go to click on the menu the bottom of the items is transparent. Font color is white, and when I have a very white photo below I can no longer find the letters in the menu.

When I change the .main-navigation a {

Exactly:

@media (max-width: 768px) {
    .main-navigation a {
        background-color: rgba (0,0,0,0.6);
    }
}

I have the right color menu, dark, and I see the menu items well, but I have a transparent background above, but a dark background appears under the mobile logo.

What do I have to enter to have everything of the same color
background-color: rgba (0,0,0,0.6);
and only the menu item chosen is of another color?

Thanks a lot.