Navigation bar obscures headings - html

Question

I am creating a resume site, and I ran into a problem that the navigation bar blocks the title, that is, it looks like this https://prnt.sc/ggkfkwSV8KUp, and I need so https://prnt.sc/oX0Hw2G_d_xk.
I tried to indent, but the navbar follows this title and obscures it all the time, no matter how indented I am, how can I fix this? I added code here, (yes, the styles here are not very, not adapted, I know) I removed a lot of code, left only two sections to show, but the fact is that it doesn’t work like mine, more precisely in a small form works like mine, but if you expand it to the whole page, then the navbar does not block the title, but it fits a little, but it can still be shown using this example.
body {
margin: 0;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background: #212121;
z-index: 2;
}
h1 {
margin: 50px;
margin-top: 1px;
float: left;
font-family: cursive;
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
margin-top: 50px;
}
.navbar {
text-transform: uppercase;
line-height: 18px;
height: 50px;
float: right;
}
li {
display:inline-block;
margin:0;
text-transform:uppercase;
}
li:after {
display: block;
content: '';
border-bottom: 1px solid aqua;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
li:hover::after {
transform: scaleX(1);
}
.button {
text-decoration: none;
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: cursive;
margin: 10px;
cursor: pointer;
font-size: 20px;
transition: 0.5s;
background-size: 200% auto;
}
.button:hover {
background-position: right center;
}
.my-photo {
position: relative;
border-radius: 50%;
height: 180px;
width: 180px;
padding: 0;
margin-top: 300px;
object-fit: cover;
z-index: -1;
margin-left: 700px;
margin-top: 150px;
}
.h2 {
font-size: 50px;
background: #19CFB1;
background: linear-gradient(to right, #19CFB1 0%, #C978CF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
font-family: cursive;
}
#text {
background: #1338CF;
background: linear-gradient(to right, #1338CF 0%, #CF70AF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 50px;
margin: 0;
font-size: 25px;
text-align: center;
font-family: cursive;
}
.home-image {
position: absolute;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
z-index: -1;
margin-bottom: -10px;
background-image: url("./img/foto-mustang-6-shelby-gt500_01.jpg")
}
.home-image::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
background-color: rgba(0,0,0,0.7);
}
blockquote {
text-align: center;
margin: 0;
color: white;
padding: 30px 30px 30px 60px;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
blockquote:before {
content: "\201C";
font-family: Arial;
color: #CBDDE7;
font-size: 50px;
position: absolute;
left: 362px;
top: 596px;
z-index: -1;
}
blockquote p {
font-style: italic;
font-size: 20px;
margin-top: 130px;
}
.about {
padding: 20px 0;
}
#about{
width: 1300px;
height: 687px;
padding: 0 80px;
margin: auto;
}
.title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 26px;
padding-bottom: 20px;
font-family: cursive;
z-index: -1;
}
.title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: #111;
transform: translateX(-50%);
}
.title::after {
content: "who i am";
font-family: 'Ubuntu', sans-serif;
position: absolute;
bottom: -8px;
left: 50%;
font-size: 20px;
color: crimson;
padding: 0 5px;
background: #fff;
transform: translateX(-50%);
}
.content {
display: flex;
align-items: center;
justify-content: space-between;
}
.image {
height: 500px;
width: 350px;
margin-left: 5px;
margin-top: 50px;
object-fit: cover;
border-radius: 15px;
}
.column-right {
width: 55%;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
text-align: justify;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./img/icon.png" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<title>CV</title>
</head>
<body>
<header class="header">
<ul class="navbar">
<li>Home</li>
<li>About Me</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
<h1>My CV</h1>
</header>
<section class="home" id="home">
<div class="wrapper">
<div class="home-header home-header-small">
<div class="home-image"></div>
<div class="container">
<div class="content-center">
<div class="profile-image">
<img src="" class="my-photo"/>
</div>
<div class="h2">Lorem ipsum</div>
<p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<footer>— <cite>Lorem ipsum</cite></footer>
</blockquote>
</div>
</div>
</section>
<section class="about" id="about">
<h2 class="title">About me</h2>
<div class="content">
<img src="" class="image"/>
<div class="column-right">
<div class="text">Lorem ipsum</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore?</p>
</div>
</div>
</section>

Answer 1

Another options is to use
.header {
position: sticky;
top: 0;
}
/* or, instead*/
.navbar {
position: sticky;
top: 0;
}
body {
margin: 0;
}
.header {
position: sticky;
top: 0px;
width: 100%;
height: 50px;
background: #212121;
z-index: 2;
}
h1 {
margin: 50px;
margin-top: 1px;
float: left;
font-family: cursive;
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
margin-top: 50px;
}
.navbar {
text-transform: uppercase;
line-height: 18px;
height: 50px;
float: right;
}
li {
display:inline-block;
margin:0;
text-transform:uppercase;
}
li:after {
display: block;
content: '';
border-bottom: 1px solid aqua;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
li:hover::after {
transform: scaleX(1);
}
.button {
text-decoration: none;
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: cursive;
margin: 10px;
cursor: pointer;
font-size: 20px;
transition: 0.5s;
background-size: 200% auto;
}
.button:hover {
background-position: right center;
}
.my-photo {
position: relative;
border-radius: 50%;
height: 180px;
width: 180px;
padding: 0;
margin-top: 300px;
object-fit: cover;
z-index: -1;
margin-left: 700px;
margin-top: 150px;
}
.h2 {
font-size: 50px;
background: #19CFB1;
background: linear-gradient(to right, #19CFB1 0%, #C978CF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
font-family: cursive;
}
#text {
background: #1338CF;
background: linear-gradient(to right, #1338CF 0%, #CF70AF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 50px;
margin: 0;
font-size: 25px;
text-align: center;
font-family: cursive;
}
.home-image {
position: absolute;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
z-index: -1;
margin-bottom: -10px;
background-image: url("./img/foto-mustang-6-shelby-gt500_01.jpg")
}
.home-image::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
background-color: rgba(0,0,0,0.7);
}
blockquote {
text-align: center;
margin: 0;
color: white;
padding: 30px 30px 30px 60px;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
blockquote:before {
content: "\201C";
font-family: Arial;
color: #CBDDE7;
font-size: 50px;
position: absolute;
left: 362px;
top: 596px;
z-index: -1;
}
blockquote p {
font-style: italic;
font-size: 20px;
margin-top: 130px;
}
.about {
padding: 20px 0;
}
#about{
width: 1300px;
height: 687px;
padding: 0 80px;
margin: auto;
}
.title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 26px;
padding-bottom: 20px;
font-family: cursive;
z-index: -1;
}
.title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: #111;
transform: translateX(-50%);
}
.title::after {
content: "who i am";
font-family: 'Ubuntu', sans-serif;
position: absolute;
bottom: -8px;
left: 50%;
font-size: 20px;
color: crimson;
padding: 0 5px;
background: #fff;
transform: translateX(-50%);
}
.content {
display: flex;
align-items: center;
justify-content: space-between;
}
.image {
height: 500px;
width: 350px;
margin-left: 5px;
margin-top: 50px;
object-fit: cover;
border-radius: 15px;
}
.column-right {
width: 55%;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
text-align: justify;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./img/icon.png" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<title>CV</title>
</head>
<body>
<header class="header">
<ul class="navbar">
<li>Home</li>
<li>About Me</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
<h1>My CV</h1>
</header>
<section class="home" id="home">
<div class="wrapper">
<div class="home-header home-header-small">
<div class="home-image"></div>
<div class="container">
<div class="content-center">
<div class="profile-image">
<img src="" class="my-photo"/>
</div>
<div class="h2">Lorem ipsum</div>
<p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<footer>— <cite>Lorem ipsum</cite></footer>
</blockquote>
</div>
</div>
</section>
<section class="about" id="about">
<h2 class="title">About me</h2>
<div class="content">
<img src="" class="image"/>
<div class="column-right">
<div class="text">Lorem ipsum</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore?</p>
</div>
</div>
</section>