robertor
Reputation: 21
Why some text in my site page, hidden behind sticky navbar
The content is getting overlapped by the navbar. I didn't use bootstrap for this navbar. I don't want my content under my sticky navbar. So I need the content align below my navbar. I have tried But I can't. Can any body tell me why this happens?. Here is the code:
Ps.I am new about css,html and Thanks for helping
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::selection{
background: rgb(0,123,255,0.3);
}
.content{
max-width: 1250px;
margin: auto;
padding: 0 30px;
margin-left: 10%;
margin-right: 10%;
}
.navbar{
padding-top: 85px;
padding-bottom: 30px;
background: #ffffff;
position: fixed;
width: 100%;
z-index: 2;
transition: all 0.3s ease;
}
.navbar.sticky{
background: #ffffff;
padding: px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: rgb(255, 0, 0);
font-size: 30px;
text-decoration: none;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: rgb(255, 0, 0);
margin-left: 25px;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover{
color: #007bff;
}
.icon{
color: rgb(255, 0, 0);
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn{
position: absolute;
right: 100px;
top: 80px;
}
@media (max-width: 1230px) {
.content{
padding: 0 60px;
}
}
@media (max-width: 1100px) {
.content{
padding: 0 40px;
}
}
@media (max-width: 900px) {
.content{
padding: 0 40px;
}
}
@media (max-width: 868px) {
body.disabled{
overflow: hidden;
}
.icon{
display: block;
}
.icon.hide{
display: none;
}
.navbar .menu-list{
position: fixed;
height: 100vh;
width: 100%;
max-width: 100%;
right: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.navbar.show .menu-list{
right: 0%;
}
.navbar .menu-list li{
margin-top: 45px;
}
.navbar .menu-list li a{
font-size: px;
margin-right: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a{
margin-right: 0px;
}
}
@media (max-width: 380px) {
.navbar .logo a{
font-size: px;
}
}
.about{
padding: 30px 0;
}
.about .title{
font-size: 38px;
font-weight: 700;
}
.about p{
padding-top: 20px;
text-align: justify;
}<body>
<nav class="navbar">
<div class="content">
<div class="logo">
<a href="#"><img src="https://pbs.twimg.com/media/EkoGzBLUUAEc9Wj.jpg" width="100" height="100" alt="" /></a>
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li><a href="m.html">Mo</a></li>
<li><a href="a.html">Ad</a></li>
<li><a href="a.html">An</a></li>
<li><a href="ots.html">Others</a></li>
<li><a href="ab.html">About</a></li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<div class="about">
<div class="content">
<div class="title">Responsive Sticky Navigation Menu Bar on Scroll using HTML CSS & JavaScript</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo impedit atque consequatur! Iusto distinctio temporibus repellendus labore odit adipisci harum ipsa beatae natus, eum eius, hic aperiam odio! Quasi molestias magnam illo voluptatem iusto ipsam blanditiis, tempore cumque reiciendis quaerat vero tenetur, sequi dolores libero voluptas vitae voluptate placeat dolorum modi ipsa nisi repellat facilis aliquam asperiores. Aut nam repellat harum quas saepe dolorum voluptates ratione, itaque consectetur explicabo a facilis rem mollitia maxime repudiandae fuga reprehenderit, odio cum incidunt labore molestiae quis non perferendis ipsam. Illum, in, deserunt. Ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint doloremque perspiciatis voluptate ducimus reiciendis rem expedita voluptatibus dicta harum, quo, aspernatur maiores possimus officia quod? Aliquid molestiae illo sequi, tempora perferendis at incidunt nam porro voluptatibus, iste aperiam blanditiis adipisci ducimus repellendus distinctio nostrum ipsum! Voluptas facilis cum, atque tempora magnam beatae sequi! Doloribus expedita, cupiditate quo quod nemo aliquam, mollitia cum ea nam ullam soluta temporibus! Repudiandae incidunt consequatur distinctio deleniti obcaecati sit facilis unde, quisquam veniam ad doloribus!</p>
</div>
</body>Upvotes: 0
Views: 152
Answers (1)
ciekals11
Reputation: 2155
Change position: fixed to position: sticky in your .navbar and add top: 0 to tell it that it needs to stay on top.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::selection{
background: rgb(0,123,255,0.3);
}
.content{
max-width: 1250px;
margin: auto;
padding: 0 30px;
margin-left: 10%;
margin-right: 10%;
}
.navbar{
padding-top: 85px;
padding-bottom: 30px;
background: #ffffff;
position: sticky;
top: 0;
width: 100%;
z-index: 2;
transition: all 0.3s ease;
}
.navbar.sticky{
background: #ffffff;
padding: px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: rgb(255, 0, 0);
font-size: 30px;
text-decoration: none;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: rgb(255, 0, 0);
margin-left: 25px;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover{
color: #007bff;
}
.icon{
color: rgb(255, 0, 0);
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn{
position: absolute;
right: 100px;
top: 80px;
}
@media (max-width: 1230px) {
.content{
padding: 0 60px;
}
}
@media (max-width: 1100px) {
.content{
padding: 0 40px;
}
}
@media (max-width: 900px) {
.content{
padding: 0 40px;
}
}
@media (max-width: 868px) {
body.disabled{
overflow: hidden;
}
.icon{
display: block;
}
.icon.hide{
display: none;
}
.navbar .menu-list{
position: fixed;
height: 100vh;
width: 100%;
max-width: 100%;
right: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.navbar.show .menu-list{
right: 0%;
}
.navbar .menu-list li{
margin-top: 45px;
}
.navbar .menu-list li a{
font-size: px;
margin-right: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a{
margin-right: 0px;
}
}
@media (max-width: 380px) {
.navbar .logo a{
font-size: px;
}
}
.about{
padding: 30px 0;
}
.about .title{
font-size: 38px;
font-weight: 700;
}
.about p{
padding-top: 20px;
text-align: justify;
}<body>
<nav class="navbar">
<div class="content">
<div class="logo">
<a href="#"><img src="https://pbs.twimg.com/media/EkoGzBLUUAEc9Wj.jpg" width="100" height="100" alt="" /></a>
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li><a href="m.html">Mo</a></li>
<li><a href="a.html">Ad</a></li>
<li><a href="a.html">An</a></li>
<li><a href="ots.html">Others</a></li>
<li><a href="ab.html">About</a></li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<div class="about">
<div class="content">
<div class="title">Responsive Sticky Navigation Menu Bar on Scroll using HTML CSS & JavaScript</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo impedit atque consequatur! Iusto distinctio temporibus repellendus labore odit adipisci harum ipsa beatae natus, eum eius, hic aperiam odio! Quasi molestias magnam illo voluptatem iusto ipsam blanditiis, tempore cumque reiciendis quaerat vero tenetur, sequi dolores libero voluptas vitae voluptate placeat dolorum modi ipsa nisi repellat facilis aliquam asperiores. Aut nam repellat harum quas saepe dolorum voluptates ratione, itaque consectetur explicabo a facilis rem mollitia maxime repudiandae fuga reprehenderit, odio cum incidunt labore molestiae quis non perferendis ipsam. Illum, in, deserunt. Ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint doloremque perspiciatis voluptate ducimus reiciendis rem expedita voluptatibus dicta harum, quo, aspernatur maiores possimus officia quod? Aliquid molestiae illo sequi, tempora perferendis at incidunt nam porro voluptatibus, iste aperiam blanditiis adipisci ducimus repellendus distinctio nostrum ipsum! Voluptas facilis cum, atque tempora magnam beatae sequi! Doloribus expedita, cupiditate quo quod nemo aliquam, mollitia cum ea nam ullam soluta temporibus! Repudiandae incidunt consequatur distinctio deleniti obcaecati sit facilis unde, quisquam veniam ad doloribus!</p>
</div>
</body>Upvotes: 1
Related Questions
- Sticky navbar disappears on scroll
- Sticky navbar creating white space
- sticky nav reveals content behind it while scrolling slowly
- problems with sticky navbar
- Sticky navbar isn't working in my website
- why some text in my site page, hidden behind navbar (bootstrap)?
- navbar sticky not working correctly in html
- Sticky navbar hides content when scrolling to top
- Content hiding under Sticky Navbar
- Sticky Navbar issue