How do I work with @media in css?

Question

Greeting to all,

I’m new to Frond-End programming, and I’m starting to learn how to work with @media to apply keying to a single page,?

I created a responsive site when the page is more than 991px wide it appears the menu, but when it is less than 991px appears a three bar icon, and if the user wants the menu to appear being less than 991px he will have to click the icon to appear the menu, as shown in the figure below;

Menu above 991px;

Now the menu below 991px without clicking on the icon.

Now the menu when you click on the icon.

What I really need is to change and take out the underscore when I step the mouse, the part of the code responsible for that would be;

@media(max-width: 991px){

    .menu{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 200px;
        display: none;
        background-color: #bfbfbf;

        border-right: 1px solid #eee;
    }

    .menu a{
        text-decoration: none; 
    }

    .menu--exibindo{
        display: block;
    }

    .menu_item{
        display: block;
        line-height: 3;
    }
}

More specifically this part of the code referring to what was shown above;

.menu a{
        text-decoration: none; 
    }

The problem is that this code as shown above does not change the menu, it was to do, I do not know where I am wrong.

I’ll make my full source code on Github available for further clarification.

JUST CLICK HERE

Answer 1

Actually your problem is not in the media query. To change the underscore property when you hover, you have to select the attribute hover CSS (which is the responsible styling for when elements will have the mouse on top of them)

Your code inside the media query has to look like this so:

.menu a:hover{
    text-decoration: none; 
}

Answer 2

If you want to remove the underscore from the side menu that appears when clicking the responsive menu icon, you simply have to use css: (downloaded and worked on localhost)

@media (max-width: 991px){
.menu a {text-decoration: none;}
}

If you want to take this underline from the menu on larger screens, use css:

.menu a {text-decoration: none;}