I understand that to access the style of an element it is with 'Element.style', but with media query, this does not work for me, since when requesting the value, it returns 'undefined' and not 'none', which is like this set in the middle?
This is the main css
.header > ul{
list-style: none;
display: inline-block;
padding-left: 20px;
position: absolute;
width: 100vw;
height: 100%;
}
And this is the mean:
@media screen and (max-width: 720px){
.header > ul{
list-style: none;
display: none;
position: absolute;
width: 20vw;
right: 0;
margin-top: 7.5%;
margin-right: 0;
}
}
HTML:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body>
<div class="header">
<h1>Logo</h1>
<ul id="menu">
<li>Accesorios</li>
<li>Razas</li>
<li>Contactenos</li>
<li>Ubicación</li>
</ul>
</div>
Forget this part, it's just because it wouldn't let me post so much code.
If the element is inheriting the property
display
from a style sheet, you should useAs can be seen in the following fiddle: https://jsfiddle.net/nu3Lsk84/
Additionally, you should not re-declare the entire list of styles from the header list. Only those you want to override as the display.