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

Question

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>

Please make a snippet or working fiddle. – codesayan Jun 13 '17 at 12:09 — codesayan, Jun 13 '17 at 12:09

EA-Lille · Accepted Answer · 2017-06-13T13:28:28.213

0

A common tip is to add padding-top.

body { padding-top: 50px; }

Bootstrap Doc

Body padding required The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

EDIT : In your code, you can add padding-top to your anchors

h2 {
  padding-top: 30px;
}

Live Demo

EDIT 2 : If you want it applies only on small screen you can put it in media queries :

@media screen and (max-width: 768px) {
  h2 {
     padding-top: 30px;
  }
}

EDIT 3 : Add a class to anchors to avoid change element position Link

edited Jun 13 '17 at 13:28

answered Jun 13 '17 at 12:45

EA-Lille

561
7
21

Some more ideas please – DarkGuy10 Jun 13 '17 at 12:49
Actually i am working on an "all device friendly" website. So if there is less width available, only then my sidenav changes into topnav . In that case, wouldn't extra padding look awkard in large screens??? – DarkGuy10 Jun 13 '17 at 13:07
You can put this css into media queries to apply css to only 1 type of screen (Edit 2). – EA-Lille Jun 13 '17 at 13:18
I think EDIT 3 suits to your problem. – EA-Lille Jun 13 '17 at 13:28
Thanks for that answer. I think i should use padding-top:30px and then margin-top:-30px. – DarkGuy10 Jun 14 '17 at 15:30

score 0 · Answer 2 · answered Jun 13 '17 at 13:17

0

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.

answered Jun 13 '17 at 13:17

Sangeet Singh

13
3

But I have tooooo many in my document. JavaScript would just mess up the entire document. Any different ideas???? – DarkGuy10 Jun 13 '17 at 14:41

Dhruvil21_04 · Answer 3 · 2017-06-13T15:20:58.270

I made a dynamic JQuery code for scrolling. So, even if the height of fixed navbar changes in future or in responsive, the header <h2> will be seen clearly, without any overlap of navbar.

No need to worry about Responsive or change in dimensions of navbar using CSS.

Just add this to your JS and don't forget to include jQuery script.

$(function() {
  var navbarHeight = $("#nav").outerHeight();
  var h2Offset = $("h2").offset();
  var h2OffsetTop = h2Offset.top;
  var scrollFinal = h2OffsetTop - navbarHeight;

  $("a").click(function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: scrollFinal
    }, 1000);
  });
});

You can refer to it also.

JS Fiddle: https://jsfiddle.net/Dhruvil21_04/7va32m30/

OR

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

$(function() {
  var navbarHeight = $("#nav").outerHeight();
  var h2Offset = $("h2").offset();
  var h2OffsetTop = h2Offset.top;
  var scrollFinal = h2OffsetTop - navbarHeight;

  $("a").click(function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: scrollFinal
    }, 1000);
  });
});

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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>

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

, the navigation just hides the

3 Answers3

No need to worry about Responsive or change in dimensions of navbar using CSS.

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