I have a navbar in my homepage and its position is fixed(I want it to be that way) but then it covers up my first heading, how can I make it so it's fixed but doesn't cover the heading? I tried adding margin-top to the heading but it doesn't give the result I want.
/* poor css I budged to make things fall into place on a 16:9 full hd window, may be the root of the issue */
.navbar{
position: fixed;
}
.figure{
margin-top: 20px;
margin-left: 15.5px;
}
.figure-caption{
text-align: center;
color: rgb(55, 55, 55);
}
.top-header{
margin-top: 0px;
text-align: center;
color: rgb(46, 46, 46);
}
.mid-header{
text-align: center;
}
footer{
text-align: center;
margin-top: 340px;
background-color: gray;
height: 25px;
}
#logo{
margin-top: 10px;
margin-left: 1300px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Front End Bootcamp</title>
</head>
<body style="background-color: #54b0cc;" >
<!-- navbar in question -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<a href="#" class="navbar-brand" style="margin-left: 20px;">My Homepage</a>
<div class = "collapse navbar-collapse">
<ul class = "navbar-nav">
<li class = "nav-item" style="margin-left: 50px;">
<a href = "#about" class = "nav-link">About</a>
</li>
<li class = "nav-item">
<a href = "#skills_and_experience" class = "nav-link">Skills & Experience</a>
</li>
<li class = "nav-item">
<a href = "#contact_me" class = "nav-link">Contact Me</a>
</li>
</ul>
<logo>
<img id="logo" class="figure-img img-fluid rounded" height = "40px" width="40px" src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\logo.jpg">
</logo>
</div>
</nav>
<div class="interests">
<!-- this h2 header should be bellow the navbar, not behind it -->
<h2 class="top-header">My Interests</h2>
<figure class="figure">
<img src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\programming.jpg" class="figure-img img-fluid rounded" alt="programming" height="640px" width="360px">
<figcaption class="figure-caption">Programing</figcaption>
</figure>
<figure class="figure">
<img src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\gaming.jpg" class="figure-img img-fluid rounded" alt="gaming" height="640px" width="360px">
<figcaption class="figure-caption">Gaming</figcaption>
</figure>
<figure class="figure">
<img src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\football.jpg" class="figure-img img-fluid rounded" alt="football" height="620px" width="360px">
<figcaption class="figure-caption">Football</figcaption>
</figure>
<figure class="figure">
<img src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\networks.jpg" class="figure-img img-fluid rounded" alt="networks" height="640px" width="360px">
<figcaption class="figure-caption">Networks</figcaption>
</figure>
<figure class="figure">
<img src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\comics.jpg" class="figure-img img-fluid rounded" alt="comics" height="640px" width="360px">
<figcaption class="figure-caption">Comics</figcaption>
</figure>
</div>
<div>
<h3 class="mid-header">Cool video I found</h3>
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/TETmRSHHaNI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
<footer>Made by: Yonatan Goldin - [email protected]</footer>
</html>CodePudding user response：
Add margin-top to .top-header, i.e. a value larger than your current one which is zero...
/* poor css I budged to make things fall into place on a 16:9 full hd window, may be the root of the issue */
.navbar{
position: fixed;
}
.figure{
margin-top: 20px;
margin-left: 15.5px;
}
.figure-caption{
text-align: center;
color: rgb(55, 55, 55);
}
.top-header{
margin-top: 40px;
text-align: center;
color: rgb(46, 46, 46);
}
.mid-header{
text-align: center;
}
footer{
text-align: center;
margin-top: 340px;
background-color: gray;
height: 25px;
}
#logo{
margin-top: 10px;
margin-left: 1300px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Front End Bootcamp</title>
</head>
<body style="background-color: #54b0cc;" >
<!-- navbar in question -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<a href="#" class="navbar-brand" style="margin-left: 20px;">My Homepage</a>
<div class = "collapse navbar-collapse">
<ul class = "navbar-nav">
<li class = "nav-item" style="margin-left: 50px;">
<a href = "#about" class = "nav-link">About</a>
</li>
<li class = "nav-item">
<a href = "#skills_and_experience" class = "nav-link">Skills & Experience</a>
</li>
<li class = "nav-item">
<a href = "#contact_me" class = "nav-link">Contact Me</a>
</li>
</ul>
<logo>
<img id="logo" class="figure-img img-fluid rounded" height = "40px" width="40px" src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\logo.jpg">
</logo>
</div>
</nav>
<div class="interests">
<!-- this h2 header should be bellow the navbar, not behind it -->
<h2 class="top-header">My Interests</h2>
<figure class="figure">
<img src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\programming.jpg" class="figure-img img-fluid rounded" alt="programming" height="640px" width="360px">
<figcaption class="figure-caption">Programing</figcaption>
</figure>
<figure class="figure">
<img src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\gaming.jpg" class="figure-img img-fluid rounded" alt="gaming" height="640px" width="360px">
<figcaption class="figure-caption">Gaming</figcaption>
</figure>
<figure class="figure">
<img src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\football.jpg" class="figure-img img-fluid rounded" alt="football" height="620px" width="360px">
<figcaption class="figure-caption">Football</figcaption>
</figure>
<figure class="figure">
<img src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\networks.jpg" class="figure-img img-fluid rounded" alt="networks" height="640px" width="360px">
<figcaption class="figure-caption">Networks</figcaption>
</figure>
<figure class="figure">
<img src="C:\Users\max25\Desktop\CS_Material\Web Dev\Bootstrap Crash Course - 2021\img\comics.jpg" class="figure-img img-fluid rounded" alt="comics" height="640px" width="360px">
<figcaption class="figure-caption">Comics</figcaption>
</figure>
</div>
<div>
<h3 class="mid-header">Cool video I found</h3>
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/TETmRSHHaNI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
<footer>Made by: Yonatan Goldin - [email protected]</footer>
</html>CodePudding user response：
As connexo pointed out in the comments, adding padding rather than margins indeed gave me the desired outcome.
.navbar{
position: fixed;
}
.figure{
margin-top: 20px;
margin-left: 15.5px;
}
.figure-caption{
text-align: center;
color: rgb(55, 55, 55);
}
.top-header{
padding-top: 65px; /* puts the header BELOW the navbar while the navbar is fixed */
text-align: center;
color: rgb(46, 46, 46);
}
.mid-header{
text-align: center;
}
footer{
text-align: center;
margin-top: 340px;
background-color: gray;
height: 25px;
}
#logo{
margin-top: 10px;
margin-left: 1300px;
}