I fixed the position property of header as fixed,but it is not working.
When I scroll down the page in mobile view, the section part of web page overlaps the header part.The home section in this code works properly whereas About section is not work in proper manner.Inorder to make webpage responsive I already added css and js file in my code,but it is not mentioned here.
<body>
<header>
<div class="row">
<div class="col-3 col-md-6" id="logo">
<a class="logo" href="#">Xyz<span>Abc</span></a>
</div>
<div class="col-9 col-md-6">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Home <span class="sr-only">
(current)</span></a>
</div>
</div>
</nav>
</div>
</div>
</header>
<section class="home">
<div class="row">
<div class="col-12">
<h2>Hello,I'm Xyz Abc</h2><br>
<p>I am Developer</p><br>
<p>Let's start <span>Scrolling</span> and know more <span>About Me.</span> </p>
</div>
</div>
</section>
<section class="about">
<div class="container-fluid">
<h3>About Me</h3>
<div class="row">
<div class="col-sm-5 col-12 bg-danger">
<img src="profile.jpg">
</div>
<div class="col-sm-7 col-12 bg-info">
<h5>I am Xyz Abc and I'm a <span>Developer</span></h5>
</div>
</div>
</div>
</section>
</body>
</html>
Css Page:
*{
margin:0;
padding:0;
text-decoration:none;
width:100%;
}
header{
font-family:sans-serif;
position:fixed;
background-color:green;
height:70px;
width:100%;
}
.home{
display:flex;
background-image: url("a4.png");
width:100%;
height:100vh;
padding-top:60px;
}
.about{
padding-top:150px;
width:100%;
}
.about .row {
width:100%;
}
You can use the boostrap class fixed-top in your header tag
<header class="fixed-top ">
.
.
.
</header>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments