Cant make my navbar stick on top

HTML-CSS
#1

The Taylor Swift h1 goes on top of the navbar when i scroll down. How can i fix this?

<head id="main">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600&display=swap"
  rel="stylesheet">
  <title>Taylor Swift Tribute Page</title>
</head>
<body>
   <header>
      <nav id="navigation">
        <a href="#home" class="links">HOME</a>
        <a href="#biography" class="links">BIOGRAPHY</a>
        <a href="#discography" class="links">DISCOGRAPHY</a>
        <a href="#awards" class="links">AWARDS</a>
      </nav>		
   </header>
   <main id="home">
     <section class="img-div">
       <img class="evermore" src="https://assets.teenvogue.com/photos/5fd50da95521eee9e3546333/16:9/w_2560%2Cc_limit/BackCoverSquare_No%2520Text.jpg">
       <div class="text">
				 <h1 id="title">Taylor Swift</h1>
				 <p>
			 </div>
		 </section>

html {
  background-color: #141414;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #383333;
  background: linear-gradient(90deg, #332e2e, #383333, #3b3434);
  font-size: 25px;
}

#navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 50px;
  border-style: solid;
  border-color: #141414;
  border-width: 7px;
}

#navigation a {
  text-decoration: none;
  padding: 7px 125px;
  color: #c4a187;
}

#navigation a:hover {
  text-decoration: none;
  text-shadow: 2px 2px #5c5656;
  color: #dbb497;
}

.main {
	display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 49px;
}

.img-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.evermore {
	width: 100%;
  height: auto;
}

.text {
	position: absolute;
	display: inline-block;
	top: 150px;
	left: 150px;
	font-size: 80px;
	font-family: 'Source Serif 4', sans-serif;
	color: #262222;
}

body {
	font-family: 'Source Serif 4', sans-serif;
	overflow: auto;
}
#2

Set a positive z-index on header.

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #383333;
  background: linear-gradient(90deg, #332e2e, #383333, #3b3434);
  font-size: 25px;
  z-index: 10;
}
1 Like
#3

It worked! Thank you!! :star_struck:

1 Like