This is the include that is being called on resolutions below 1000px. I think it's just the necessary code. It shouldn't make a difference if I were to paste it directly in the body of my webpage.
<header class="header" id="header">
Leeighton Talks About Pokémon
</header>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: 'Josefin Sans', sans-serif; }
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background-color: rgba(255,255,255,1.00);
background-color: rgba(255,255,255, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 12%;
width: 100%;
text-align: center;
margin-top: 10px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 48px;
color: #b9b9b9;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus { color: #000000; }
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.navigation {
overflow: hidden;
background-color: #ffffff;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
padding-top: 10px;
}
.overlay .closebtn {
font-size: 80px;
top: -40px;
right: -15px;
margin-right:10px;
padding-top: 15px;
}
@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>
<div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content"> <a class="homepage" href="index.html">Home Page</a> <a class="news" href="news.html">News</a> <a class="videogames" href="video-games.html">Video Games</a> <a class="leeightonsanimewalkthrough" href="leeighton-s-anime-walkthrough.html">Leeighton's Anime Walkthrough</a> <a class="pokedex" href="pokedex.html">Pokédex</a> <a class="forums" href="https://www.leeightontalksaboutpokemonforums.net/">Forums</a> </div>
</div>
<div class="navigation">
<span style="float:right;margin-right:15px;font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
<style>
body.homepage a.homepage,
body.news a.news,
body.videogames a.videogames,
body.leeightonsanimewalkthrough a.leeightonsanimewalkthrough,
body.pokedex a.pokedex,
body.forums a.forums, {
color: #000000;
}
</style>
<div>
<script type="text/javascript" src="returntothetopbutton.js"></script>
<button onclick="topFunction()" id="myBtn" title="Go to top">↑</button>
</div>
<div class="social-media">
<a href="https://www.facebook.com/" target="_blank">
<img src="pictures/social-media/facebook.png" width="100" height="100" alt=""/>
</a>
<a href="https://www.twitter.com/" target="_blank">
<img src="pictures/social-media/twitter.png" width="100" height="100" alt=""/>
</a>
<a href="https://www.youtube.com/" target="_blank">
<img src="pictures/social-media/youtube.png" width="100" height="100" alt=""/>
</a>
<a href="https://www.instagram.com/" target="_blank">
<img src="pictures/social-media/instagram.png" width="100" height="100" alt=""/>
</a>
</div>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
<style>
.btn.share-btn {
border: medium none;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1.2em;
margin-top: 6px;
opacity: 0.9;
outline: medium none;
padding: 8px 16px;
}
.share-btn {
display: inline-block;
color: #ffffff;
border: none;
padding: 0.2em;
width: 4em;
opacity: 0.9;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
outline: none;
text-align: center;
}
.share-btn:hover,
.share-btn:focus {
color: #eeeeee;
}
.share-btn:active {
position: relative;
top: 2px;
box-shadow: none;
color: #e2e2e2;
opacity: 1;
outline: medium none;
position: relative;
top: 2px;
}
.twitter {
background: #55acee none repeat scroll 0 0;
}
.facebook {
background: #3b5998 none repeat scroll 0 0;
}
.reddit {
background: #ff5700 none repeat scroll 0 0;
}
.email {
background: #444444 none repeat scroll 0 0;
}
</style>
<!-- Social Button HTML -->
<div class="sharebuttons">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=<URL>" target="_blank" class="btn share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- Twitter -->
<a href="http://twitter.com/share?url=<URL>&text=<TEXT>&via=<VIA>" target="_blank" class="btn share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Reddit (url, title) -->
<a href="http://reddit.com/submit?url=<URL>&title=<TITLE>" target="_blank" class="btn share-btn reddit">
<i class="fa fa-reddit"></i>
</a>
<!-- Email -->
<a href="mailto:?subject=<SUBJECT&body=<BODY>" target="_blank" class="btn share-btn email">
<i class="fa fa-envelope"></i>
</a>
</div>
1 Correct answer
15
Replies
AdChoices