Greeting for all,
I am studying HTML with CSS and I am still in the process of learning, I created a keyed, that is, when the page is above 992px wide it shows the menu, when it is less than 992px it hides a menu and a icon and when he wants to click on the menu appears.
The problem is that I can not insert the color in the link source within max-width, that's all.
My full project is here
This is the part of the code that I'm having trouble with.
<nav class="navegacao">
<img src="images/logo.png" width="320" height="100">
<div class="navegacao_menu">
<button class="botao-chaveador js-botao-chaveado"></button>
<ul class="menu js-menu">
<li class="menu_item">
<a href="#">Home</a>
</li>
<li class="menu_item">
<a href="#servicos">Nossos Serviços</a>
</li>
<li class="menu_item">
<a href="#">Imóveis</a>
</li>
<li class="menu_item">
<a href="#">Nos conheça</a>
</li>
<li class="menu_item">
<a href="#">Contatos</a>
</li>
</ul>
</div>
</nav>
This is the part of the code that involves the problem;
.menu{
margin: 0;
font-size: 1.8rem;
list-style: none;
}
@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{
color: black;
}
.menu--exibindo{
display: block;
}
.menu_item{
display: block;
line-height: 3;
}
}
@media(min-width: 992px ){
.menu_item{
display: inline-block;
padding-right: 20px;
line-height: 8.5;
}
}
I tried it that way, but it did not work out;
.menu a{
color: black;
}
I could put this code out of max-width and min-width, and it would work, but if I do this it will stay in fixed colors with both low resolution and high resolution, and that's not the goal. >