title: How to align elements so CSS fixed doesnt overlap on page load
body: <p>I'd like to make my navigation menu align itself so it doesn't overlap on page load but overlap when scrolling down (Dynamic nav bar)</p>
  
  <p>What I currently have is here: <a href="https://m.omegarealm.tk/" rel="nofollow">https://m.omegarealm.tk/</a>
  As you can see on the page's initial load the bar overlaps the text, I'd like the nav bar not to overlap the text when the page is loaded but overlap on scroll.</p>
  
  <p>My current CSS is here: <a href="https://files.omegarealm.tk/mobile.css" rel="nofollow">https://files.omegarealm.tk/mobile.css</a></p>
  
  <p>Quick note: The CSS is one line when you access it because cloudflare compresses it. It's indented on the server.</p>
  
  <p>Thanks!</p>