Issue
I am trying to have a top text and navbar fixed at the top of the page and it should not scroll up with the content. I was able to fix it at the top by using position:fixed,but content is getting overlapped.
I used position: position:sticky, set margin and padding, but nothing helped.
I want to know how neatly I can achieve this. Please help
* {
text-align: center;
margin: 0;
}
h1 {
background-color: aquamarine;
}
.top {
width: 100%;
position: fixed;
}
.navbar {
background-color: black;
width: 100%;
}
.navbar a {
color: wheat;
font-size: 1.5rem;
margin: 2%;
}
p {
font-size: 2rem;
}
h3,
h2 {
font-size: 5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./home.css">
</head>
<body>
<div class="top">
<h1>John Doe</h1>
<div class="navbar">
<div class="navbar-content">
<a href="#about-me"> About Me</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</div>
</div>
</div>
<div id="content">
<div id="about-me">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus repellat ullam dolore sequi sapiente
eveniet a tempora dolorum porro inventore illo, maiores minus corporis. Facere mexcepturi corporis.
</p>
</div>
<div id="projects">
<h2>Project 1</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis voluptas accusamus ab eum iste, nihil
laborum sit harum architecto laudantium odio, ratione totam quis qui quaerat suscipit corporis et rem.
</p>
</div>
<div id="contact">
<h2>Contact Info</h2>
<h3>233443454354</h3>
<h3>Address: abc, 1234</h3>
</div>
</div>
</body>
</html>
Solution
add padding top to your content:
#content {
padding-top: 80px; /* height of your nav */
}
Answered By - yubo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.