Case: When URL looks like localhost/test.html#services or getting to this page from another page with a link test.html#services
I need certain margin or padding to the div that contains id="services" from the top.
My Code:
.navbar{
position:fixed;
top:0;
width:100%;
z-index:2;
background-color:#f1f1f1;
}
nav ul li{
display:inline-flex;
}
.container{
margin-top:4rem;
}
.container h1{
text-align:center;
}<div class="navbar">
<nav>
<ul>
<li>Home</li>
<li><a href="#services">Services</a></li>
</ul>
</nav>
</div>
<section>
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquam distinctio facere nisi ipsum, ab odit eaque ea nulla quibusdam! Id molestias odio deleniti praesentium. Provident nulla reprehenderit aut cum?Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquam distinctio facere nisi ipsum, ab odit eaque ea nulla quibusdam! Id molestias odio deleniti praesentium. Provident nulla reprehenderit aut
<p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquam distinctio facere nisi ipsum, ab odit eaque ea nulla quibusdam! Id molestias odio deleniti praesentium. Provident nulla reprehenderit aut cum?Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquam distinctio facere nisi ipsum, ab odit eaque ea nulla quibusdam! Id molestias odio deleniti praesentium. Provident nulla reprehenderit aut
<p>
<div id="services">
<h1 class="text-danger">Our Services</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquam distinctio facere nisi ipsum, ab odit eaque ea nulla quibusdam! Id molestias odio deleniti praesentium. Provident nulla reprehenderit aut cum?Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquam distinctio facere nisi ipsum, ab odit eaque ea nulla quibusdam! Id molestias odio deleniti praesentium. Provident nulla reprehenderit aut
<p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquam distinctio facere nisi ipsum, ab odit eaque ea nulla quibusdam! Id molestias odio deleniti praesentium. Provident nulla reprehenderit aut cum?Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquam distinctio facere nisi ipsum, ab odit eaque ea nulla quibusdam! Id molestias odio deleniti praesentium. Provident nulla reprehenderit aut
<p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquam distinctio facere nisi ipsum, ab odit eaque ea nulla quibusdam! Id molestias odio deleniti praesentium. Provident nulla reprehenderit aut cum?Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquam distinctio facere nisi ipsum, ab odit eaque ea nulla quibusdam! Id molestias odio deleniti praesentium. Provident nulla reprehenderit aut
<p>
</div>
</div>
</section>