-1

On my site, I have the Bootstrap 3 theme with a fixed navigation bar.

Some of the text is hidden by the navigation bar.

How to create an offset over an anchor link ?

Mathieu
  • 115
  • 10
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Nov 06 '19 at 13:04
  • Need to fix this using jquery.. Is this ok for u? – Manikandan2811 Nov 06 '19 at 13:05
  • plz refer this link.. https://coderwall.com/p/z7gfjq/scroll-to-page-sections-with-nav-links – Manikandan2811 Nov 06 '19 at 13:06
  • It's common issue. Check previous answers. [https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors](https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors) – Travnikov.dev Nov 06 '19 at 13:11
  • Thank you I will test all these solutions – Mathieu Nov 06 '19 at 13:36

1 Answers1

0

Add the following pseudo-element to the style :target { padding-top: 10%;} replace 10% value with navigation bar's height.

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
  padding-top:10%;
}
<!DOCTYPE html>
<html>
<head>
<title>Sample code</title>
</head>
<body>

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>

</body>
</html>
prajun karn
  • 51
  • 3