1 Correct answer
When I'm trying to get something to work, I put it in a plain vanilla page.
This code does exactly what is expected. Nothing more, nothing less.
...<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fullscreen Nav Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: 'Lato', sans-serif; }
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow
16
Replies
When you post a link to your online page, you do not need to also post your code. We can see all the code from your online page.
I'm seeing a number of beginner mistakes starting with poorly organized RWD code and no viewport meta tag.
Starting on lines 1 - 54,. replace what you have now with this code. By the way, embedded CSS code is for page specific styles only. Sitewide styles really do belong in the external CSS file. And one more thing, in CSS & HTML, paragraph is not a valid selector name. Use the p instead.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pokémon - English dubbed episode 0001</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,300" rel="stylesheet">
<link href="css/leeightontalksaboutpokemon.css" rel="stylesheet" type="text/css">
<style>
a { text-decoration: none }
a:link { color: #9F9F9F; }
a:visited { color: #9F9F9F; }
a:hover, a:active, a:focus {
color: #282828;
transition: color 0.7s ease-in-out;
}
h1 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 100;
}
h2 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
}
p {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
}
<style>
</head>
LIZZIE wrote
I have a style sheet that contains the following values...
min-width: 1000px
max-width:1000px
Why? When you express min-width: 1000px along with max-width: 1000px it is the exact same thing as width:1000px. Why over complicate things?
Also these social media icons are a usability problem for me. They interfere with content on the page.
When I'm trying to get something to work, I put it in a plain vanilla page.
This code does exactly what is expected. Nothing more, nothing less.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fullscreen Nav Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: 'Lato', sans-serif; }
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus { color: #f1f1f1; }
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay { overflow-y: auto; }
.overlay a { font-size: 20px }
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide downwards from the top:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>
AdChoices