My webpage layout seems to be changing when I resize my browser, causing the elements to move with the vertical scrollbar. How can I keep them fixed at the top?
This is the HTML5 code I'm using:
<header id="container">
<div id="logo">
<a id="index" href="index.html"><img src="img/LOGO.PNG" alt="Scope in CST" /></a>
</div>
<nav id="menu">
<a href="about.html">About</a>
<a href="events.html">Events</a>
<li id="smenu"><a href="#">Communities</a>
<ul class="submenu">
<li><a href="#">Speakers</a></li>
<li><a href="#">Students</a></li>
<li><a href="#">Ambassadors</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Idea</a></li>
</ul></li>
<a href="#">Angel Investors</a>
<a href="contact.html">Contact Us</a>
<a href="timeline.html">Timeline</a>
<Button type="button" onClick="location.href='memebrs.scopecst.org';">Login</Button>
</nav>
</header>
Here's what I have done so far in the CSS: