Show header below fixed nav when clicking hash tag link


Tags: html,css

Problem :

I have a fixed navigation bar. Its menu items link to a bookmark with a hash tag: example.html#bookmark

When the hash tag link is clicked, the <h1 id="bookmark">Bookmark</h1> should show, just below the nav, like this:

What should happen

But currently, the heading element is being overlapped by the fixed header navigation bar:

What actually happens

How can this be prevented?

The HTML and CSS:

* {
  margin: 0;
  padding: 0;
}
.header {
  height: 80px;
  background: #EEE;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 80px;
  text-align: center;
}
.header a {
  color: blue;
  text-decoration: none;
}
/*Ignore below this. This just creates padding for the example to scroll*/

body:before,
body:after {
  content: '';
  display: block;
  height: 200vh;
}
<div class="header">
  <a href="#bookmark">Click this link to take you to the anchor</a>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet auctor tellus. Integer imperdiet urna vulputate pellentesque consectetur. Donec bibendum mi ac augue maximus, a porttitor risus faucibus. Aenean dui nisi, ornare et auctor vel, condimentum
  vel lorem. Aliquam et mollis nisi, nec auctor diam. Ut sollicitudin vel nisl vel condimentum. Quisque ut nisl lobortis, blandit ante vitae, pellentesque lectus.</p>


<h1 id="bookmark">Bookmark</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet auctor tellus. Integer imperdiet urna vulputate pellentesque consectetur. Donec bibendum mi ac augue maximus, a porttitor risus faucibus. Aenean dui nisi, ornare et auctor vel, condimentum
  vel lorem. Aliquam et mollis nisi, nec auctor diam. Ut sollicitudin vel nisl vel condimentum. Quisque ut nisl lobortis, blandit ante vitae, pellentesque lectus.</p>



Solution :

Here is a simple workaround. Give the linked element a suitable large top padding, and cancel it out with an equal negative margin:

h1 {
  margin-top: -80px;
  padding-top: 80px;
}

The linked element moves the viewport to the top of the elements padding and the negative margin removes the extra whitespace.

Example

* {
  margin: 0;
  padding: 0;
}
.header {
  height: 80px;
  background: #EEE;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 80px;
  text-align: center;
}
.header a {
  color: blue;
  text-decoration: none;
}
h1 {
  margin-top: -80px;
  padding-top: 80px;
}

/*Ignore below this. This just creates padding for the example to scroll*/
body:before,
body:after {
  content: '';
  display: block;
  height: 100vh;
}
<div class="header">
  <a href="#bookmark">Click this link to take you to the anchor</a>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet auctor tellus. Integer imperdiet urna vulputate pellentesque consectetur. Donec bibendum mi ac augue maximus, a porttitor risus faucibus. Aenean dui nisi, ornare et auctor vel, condimentum</p>

<h1 id="bookmark">Bookmark</h1>
<p>vel lorem. Aliquam et mollis nisi, nec auctor diam. Ut sollicitudin vel nisl vel condimentum. Quisque ut nisl lobortis, blandit ante vitae, pellentesque lectus.</p>


Limitation

A limitation of this workaround is the padding that is now underneath the text above the linked element. Any background colour of the linked element would show underneath and this would require its own workaround :)

Limitation


    CSS Howto..

    Use ::after selector to show line number but also display a element next to it when hovering over the containing table td cell

    How to specify which element to change background color jquery

    How to structure selectors in css when using specificity?

    css for mobile devices how to make '@media all' work on wordpress child theme

    How to shrink wrap floating content?

    How to show a background color over the full width when zooming in?

    How to make the gradient border stay at the screen

    How to get Owl Carousel Owl-Page (dots) Responsive

    Text Underline Showing Underline

    How to make width of nested CSS elements all the same?

    How to use overflow-y:auto with child with bottom: 0 and position:absolute?

    How to set a CSS property with a variable in JQuery?

    How to target a child element of a multiple parent selector in SASS [duplicate]

    How to dynamically change the value of a CSS property inside a stylesheet?

    How to write css code in javascript? (Uncaught TypeError: Cannot set property “height” of undefined)

    How to give hover effect to next div using css

    How to add “android_asset/www/” to the image's path in the CSS only if app is running in Android?

    CSS Horizontal Menu is showing list bullets

    How can I give a javascript element a CSS class?

    How can I increase space just above the footer line?

    CSS issue - How to Prevent Floating Objects from Wrapping in a Container, without changing size of container?

    How to reposition a div

    How to target Android stock/native browser to adjust CSS

    How to remove extra space after a colon in CSS with Sublime Text 2?

    how to remove a TR which have a TD that contain specific text

    How set a page to maximum and minimum sizes via css

    How to add CSS class to CQ dialog box

    How to display message inline

    how to switch between left and right css rules using Jquery?

    How can i include label-info from twitter boostrap in my own class definition?