Imad Farooque Imad Farooque -4 years ago 53
CSS Question

I am using a top-navigation but whenever i use <a> to reach to a <h2>, the navigation just hides the <h2>

I am new to Stack Overflow, so please excuse me if i made any mistake.

I am using a fixed top navigation with greatest z-index. Now whenever I use to go to a specific , since the is in the top, it is hided by the navigational bar.
scroll to the end and click o "Go"
u will go to Heading-2
But, Heading-2 is hidden by navigation bar.
Is there any way to avoid this nonsense??



function myFunction() {
var x = document.getElementById("nav");
if (x.className === "sidenav") {
x.className += " responsive";
} else {
x.className = "sidenav";
}
}

body {
margin: 0;
}

h1 {
margin-left: 20px;
font-weight: bold;
text-align: center;
font-family: 'High Tower Text';
outline: ridge 5px #fffd78;
padding: 10px;
background-color: rgb(56, 62, 50);
color: #fffd78;
}

.sidenav a {
display: block;
float: left;
color: black;
line-height: 25px;
}

.sidenav a:hover:not(.active) {
background-color: rgb(56, 62, 50);
color: #fffd78;
transition: 0.5s;
}

.sidenav {
line-height: 25px;
z-index: 3;
opacity: 1;
width: 100%;
position: fixed;
height: auto;
top: 0;
background-color: #f1f1f1;
}

div.content {
z-index: 1;
margin-left: 0;
margin-right: 45px;
margin-top: 41px;
}

.sidenav a:not(:first-child) {
display: none;
}

.sidenav a.show {
display: block;
}

.sidenav a.icon {
background-color: #f1f1f1;
float: right;
display: block;
}

.sidenav.responsive {
position: fixed;
z-index: 3;
height: 100%;
}

.sidenav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}

.sidenav.responsive a {
float: none;
display: block;
text-align: left;
}

.sidenav.responsive a.show {
display: block !important;
}

<!DOCTYPE html>
<html>

<body>
<div id="nav" class="sidenav">
<a href="javascript:void(0)">HOME</a>
<a href="javascript:void(0)" class="show">About Us</a>
<a href="javascript:void(0)" target="_self">Link</a>
<a href="javascript:void(0)" target="_self">Link1</a>
<a href="javascript:void(0)" target="_self">Link2</a>
<a href="javascript:void(0)" target="_self">Link3</a>
<a href="javascript:void(0)" target="_self">Link4</a>
<a href="javascript:void(0)" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<div class="content">
<h1>Head</h1>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<h2 id="h2">Heading-2</h2>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p><a href="#h2">Go</a>
</div>
</body>

</html>




Answer Source

I cannot think of a solution with pure css. If you can use Javascript then on clicking "GO" you can call that function. In that function you can scroll to the heading div and then scroll 20-30 px up. This can be done easily by using the scrollTop and scrollHeight properties of a division.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download