This is the HTML for my webpage. I want to make the navigation bar responsive and it works when I load the page from my filsystem but when I loaded it from github, it failed.
<!DOCTYPE html>
<html>
<head>
<title>Pokemon</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link href="CSS/pokemon.css" rel="stylesheet" type="text/css">-->
<!--<link href="CSS/pmonResNav.css" rel="stylesheet" type="text/css">-->
<link href="CSS/pokemonResp2.css" rel="stylesheet" type="text/css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class=".header">
<a href="#" class="logo">Elusive Sky.</a>
<input type="checkbox" id="check">
<label for="check" class="icons">
<i class="bx bx-menu" id="menu-icon"></i>
<i class='bx bx-x' id="close-icon"></i>
</label>
<nav class="navbar">
<a href="#" style="--i:0">
<span></span>POKEMON
</a>
<a href="#" style="--i:1">
<span></span>POKEMON
</a>
<a href="#" style="--i:2">
<span></span>POKEMON
</a>
<a href="#" style="--i:3">
<span></span>POKEMON
</a>
<a href="#" style="--i:4">
<span></span>ABOUT
</a>
</nav>
<a href="#" class="email">E-MAIL ME</a>
</header>
<section class="container">
<span class="animate bg"></span>
<div class="content">
<h1>GOTTA CATCH <span class="animate" style="--i:1"></span></h1>
<h1>EM ALL.<span class="animate" style="--i:1.5"></span></h1>
<h1>J##### F#####<span class="animate" style="--i:3"></span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis quod consequatur qui esse veniam voluptate impedit ad quis porro.
Nihil, culpa numquam? Aliquid possimus a magnam asperiores rerum maiores! Pariatur.
<span class="animate" style="--i:3.7"></span>
</p>
<div class="btn-box">
<a href="#" class="btn">Meet Me</a>
<a href="#" class="btn">Cards</a>
<span class="animate" style="--i:4.27"></span>
</div>
</div>
</section>
</body>
</html>
I thought the CSS was clean. Maybe the max-width values are wrong. But these are the values at which point my page began to change its format to fit the page. The links have an opacity of 1 when the are not supposed to. I tried setting the display to none but this did not work either.
@media (max-width:1220px) {
.header {
padding: 0 4%;
}
.email {
display: none;
}
.logo {
font-size: 1.1rem;
}
}
@media (max-width: 992px) {
.icons {
display: inline-flex;
margin: 1rem;
}
#check:checked~.icons #menu-icon {
display: none;
}
.icons #close-icon {
display: none;
}
#check:checked~.icons #close-icon {
display: block;
}
.navbar {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 0;
background: rgba(31, 30, 30, .5);
backdrop-filter: blur(50px);
overflow: hidden;
margin: 0;
/*remember box shadow*/
box-shadow: 0 0.5rem 1rem right rgba(31, 30, 30, .5);
/*x,y off-set, blur and spread radius, color*/
/*maybe*/
}
#check:checked~.navbar {
height: 15rem;
/*height for the background*/
}
.navbar a {
display: block;
text-align: center;
margin: 1.5rem 0;
opacity: 0;
transition: .3s ease;
transform: translateY(-50px);
cursor: default;
}
.navbar a:hover {
color: white;
transition: 0s;
}
.navbar a span {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
#check:checked~.navbar a {
display: block;
opacity: 1;
transform: translateY(0);
transition: .5s ease;
transition-delay: calc(.15s * var(--i));
}
}