Update: Apologies for the previous issues encountered with offline hosting. Upon transferring everything to the domain, the problem has been resolved. However, a lingering question remains about why the website loaded incorrectly when all files were kept in a folder on the desktop compared to running it through a host.
I'm facing a peculiar issue with a website I'm developing. Whenever I make a single change to the page, and about 75% of the time when trying to load it normally, the navigation bar glitches. Unless you hit the "maximize window" button twice on the browser, the navigation bar loses its intended positioning and jumps to the top immediately upon scrolling. Once you hit the maximize window button twice, it works without any issues. Below are my current HTML, CSS, and JS codes. Please disregard any sarcasm in my note tags and the fact that the page is mostly incomplete. I'm focusing on fixing these issues before moving forward.
HTML:
<!DOCTYPE html>
<html lang="en>
<head>
<title>The Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" media="screen, projection" href="style.css">
<script type ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type ="text/javascript" src="script.js"></script>
</head>
<body>
<div class="status"></div>
<div class="container">
<a href="http://www.wolvesofthedust.com/"><img src="http://i1288.photobucket.com/albums/b494/ShadowfangInnovia/WolvesoftheDustSiteHeader_zpsdddba823.png" height="auto" width="940" border="0" alt=" photo WolvesoftheDustSiteHeader_zpsdddba823.png"/></a>
<nav>
<ul class="clearfix">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</nav>
<h2>TEXT TEST FOR TESTING TEXT</h2>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
(Repeated 30 times)
</div>
CSS:
html {
padding: 0;
margin: 0;
background-color: #000;
}
(Continuation of CSS styling)
JS:
(JavaScript code provided for the navigation bar fix)
Thank you for your assistance,
Shadowfang