How to keep nav bar at the top of page but not visible on screen as scrolling down?

I want the nav bar and header to just be at the top of the page but instead it stays on the screen as scrolling. Anytime i try to fix it it just sends the title to the side or messes with the design on the nav bar. And im struggling with getting everything to center and scale down if the window is minimized. I want to have all contents center and the nav to just hide as you scroll.

my mess of a website atm

html {
  background-image: url('background.png');
  background-size: cover;
  text-align: center;
}


/*title formatting*/

h1 {
  font-size: 130px;
  line-height: calc(10px + 15vh);
  /*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
  color: #280000;
  font-family: 'Guttural';
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  animation: blink 9s infinite;
  -webkit-animation: blink 9s infinite;
}

body {
  font-family: 'Glitch Goblin';
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* effect for title*/

@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #8000;
    text-shadow: none;
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    /*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
    text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
    color: #0C0303;
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #120101;
    text-shadow: none;
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    /*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
    text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
    color: #280000;
  }
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
}

img {
  display: flex;
}

a {
  font-size: 1.5rem;
  padding: 1rem 3rem;
  color: #ff0000;
  text-transform: uppercase;
}


/* NAV BUTTON*/

:root {
  --glow-color: hsl(0 100% 47%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.glowing-btn {
  position: relative;
  color: var(--glow-color);
  cursor: pointer;
  padding: 0.5em 1em;
  border: 0.15em solid var(--glow-color);
  border-radius: 0.45em;
  background: none;
  perspective: 2em;
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 0.8em;
  -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color);
  -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color);
  box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color);
  animation: border-flicker 2s linear infinite;
}

.glowing-txt {
  float: left;
  margin-right: -0.8em;
  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker 3s linear infinite;
}

.faulty-letter {
  opacity: 0.5;
  animation: faulty-flicker 2s linear infinite;
}

.glowing-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  filter: blur(1em);
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
  background: var(--glow-color);
  pointer-events: none;
}

.glowing-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
  background-color: var(--glow-color);
  box-shadow: 0 0 2em 0.2em var(--glow-color);
  transition: opacity 100ms linear;
}

.glowing-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
  animation: none;
}

.glowing-btn:hover .glowing-txt {
  animation: none;
}

.glowing-btn:hover .faulty-letter {
  animation: none;
  text-shadow: none;
  opacity: 1;
}

.glowing-btn:hover:before {
  filter: blur(1.5em);
  opacity: 1;
}

.glowing-btn:hover:after {
  opacity: 1;
}

@keyframes faulty-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 0.1;
  }
  4% {
    opacity: 0.5;
  }
  19% {
    opacity: 0.5;
  }
  21% {
    opacity: 0.1;
  }
  23% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  83% {
    opacity: 0.4;
  }
  87% {
    opacity: 1;
  }
}

@keyframes text-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 1;
  }
  8% {
    opacity: 0.1;
  }
  9% {
    opacity: 1;
  }
  12% {
    opacity: 0.1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  72% {
    opacity: 0.2;
  }
  77% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.9;
  }
}

@keyframes border-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.1;
  }
  8% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 600px) {
  .glowing-btn {
    font-size: 1em;
  }
}

<nav>
  <h1>Freakish Bizzaar Studio</h1>
  <a class="glowing-btn" href="Index.html"><span class="glowing-txt">H<span class="faulty-letter">O</span>ME</span></a>
  <a class="glowing-btn" href="Shop.html"><span class="glowing-txt">S<span class="faulty-letter">H</span>OP</span></a>
  <a class="glowing-btn" href="Album.html"><span class="glowing-txt">ALB<span class="faulty-letter">U</span>M</span></a>
  <a class="glowing-btn" href="History.html"><span class="glowing-txt">HI<span class="faulty-letter">STO</span>RY</span></a>
  <a class="glowing-btn" href="Contact.html"><span class="glowing-txt">CON<span class="faulty-letter">TA</span>CT</span></a>
</nav>
<br>
<br>
<img src="sitestyles/Divider.png" alt="" width="2800" height="321" />

Scss=

`nav{
  width: 100%;
  position: fixed;
  top:50px;
  text-align:center;
}
nav a{
  font-weight:800;
  text-transform:uppercase;
  text-decoration:none;
  color:#16151b;
  margin:0 15px;
  font-size:16px;
  letter-spacing:1px;
  position:relative;
  display:inline-block;
}
nav a:before{
  content:'';
  position: absolute;
  width: 100%;
  height: 3px;
  background:#16151b;
  top:47%;
  animation:out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
nav a:hover:before{
  animation:in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;

}
@keyframes in{
  0%{
    width: 0;
    left:0;
    right:auto;
  }
  100%{
    left:0;
    right:auto;
    width: 100%;
  }
}
@keyframes out{
  0%{
    width:100%;
    left: auto;
    right: 0;
  }
  100%{
    width: 0;
    left: auto;
    right: 0;
  }
}

@for $i from 1 through 5 {
  nav a:nth-child(#{$i}){
    animation:show .2s #{$i*0.1+1}s ease 1 both;
  }
}`

Solution

When you remove the fixed position on navbar, all html element moves to the left halfway offscreen and it is because you have defined flex property in body so all elements are being display flex and not taking 100% width. I replaced your flex css to custom class and I updated your code. Please check:-

  html {
  background-image: url('background.png');
  background-size: cover;
  text-align: center;
}


/*title formatting*/

h1 {
  font-size: 130px;
  line-height: calc(10px + 15vh);
  /*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
  color: #280000;
  font-family: 'Guttural';
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  animation: blink 9s infinite;
  -webkit-animation: blink 9s infinite;
}

nav {
  margin-bottom: 90px;
}

body {
  font-family: 'Glitch Goblin';
  min-height: 100vh;
}


/* effect for title*/

@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #8000;
    text-shadow: none;
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    /*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
    text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
    color: #0C0303;
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #120101;
    text-shadow: none;
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    /*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
    text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
    color: #280000;
  }
}

img {
  display: flex;
}

a {
  font-size: 1.5rem;
  padding: 1rem 3rem;
  color: #ff0000;
  text-transform: uppercase;
}


/* NAV BUTTON*/

:root {
  --glow-color: hsl(0 100% 47%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.glowing-btn {
  position: relative;
  color: var(--glow-color);
  cursor: pointer;
  padding: 0.5em 1em;
  border: 0.15em solid var(--glow-color);
  border-radius: 0.45em;
  background: none;
  perspective: 2em;
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 0.8em;
  -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color);
  -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color);
  box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color);
  animation: border-flicker 2s linear infinite;
}

.glowing-txt {
  float: left;
  margin-right: -0.8em;
  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker 3s linear infinite;
}

.faulty-letter {
  opacity: 0.5;
  animation: faulty-flicker 2s linear infinite;
}

.glowing-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  filter: blur(1em);
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
  background: var(--glow-color);
  pointer-events: none;
}

.glowing-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
  background-color: var(--glow-color);
  box-shadow: 0 0 2em 0.2em var(--glow-color);
  transition: opacity 100ms linear;
}

.glowing-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
  animation: none;
}

.glowing-btn:hover .glowing-txt {
  animation: none;
}

.glowing-btn:hover .faulty-letter {
  animation: none;
  text-shadow: none;
  opacity: 1;
}

.glowing-btn:hover:before {
  filter: blur(1.5em);
  opacity: 1;
}

.glowing-btn:hover:after {
  opacity: 1;
}

@keyframes faulty-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 0.1;
  }
  4% {
    opacity: 0.5;
  }
  19% {
    opacity: 0.5;
  }
  21% {
    opacity: 0.1;
  }
  23% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  83% {
    opacity: 0.4;
  }
  87% {
    opacity: 1;
  }
}

@keyframes text-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 1;
  }
  8% {
    opacity: 0.1;
  }
  9% {
    opacity: 1;
  }
  12% {
    opacity: 0.1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  72% {
    opacity: 0.2;
  }
  77% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.9;
  }
}

@keyframes border-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.1;
  }
  8% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 600px) {
  .glowing-btn {
    font-size: 1em;
  }
}
.common-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Example</title>
</head>
<body>
    <nav>
        <h1>Freakish Bizzaar Studio</h1>
        <a class="glowing-btn" href="Index.html"><span class="glowing-txt">H<span class="faulty-letter">O</span>ME</span></a>
        <a class="glowing-btn" href="Shop.html"><span class="glowing-txt">S<span class="faulty-letter">H</span>OP</span></a>
        <a class="glowing-btn" href="Album.html"><span class="glowing-txt">ALB<span class="faulty-letter">U</span>M</span></a>
        <a class="glowing-btn" href="History.html"><span class="glowing-txt">HI<span class="faulty-letter">STO</span>RY</span></a>
        <a class="glowing-btn" href="Contact.html"><span class="glowing-txt">CON<span class="faulty-letter">TA</span>CT</span></a>
      </nav>
      <div class="common-section">
          <img src="placeholder.png" alt="" width="200" height="200" />
      </div>
      <div class="common-section">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae sapiente nostrum laborum nemo porro neque unde cumque earum blanditiis pariatur, veniam saepe nam aliquam iusto voluptatem expedita asperiores sit modi.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae sapiente nostrum laborum nemo porro neque unde cumque earum blanditiis pariatur, veniam saepe nam aliquam iusto voluptatem expedita asperiores sit modi.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae sapiente nostrum laborum nemo porro neque unde cumque earum blanditiis pariatur, veniam saepe nam aliquam iusto voluptatem expedita asperiores sit modi.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae sapiente nostrum laborum nemo porro neque unde cumque earum blanditiis pariatur, veniam saepe nam aliquam iusto voluptatem expedita asperiores sit modi.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae sapiente nostrum laborum nemo porro neque unde cumque earum blanditiis pariatur, veniam saepe nam aliquam iusto voluptatem expedita asperiores sit modi.
      </div>
</body>
</html>

Let me know if it works for you or not.