"Jump to" links on a fixed header?

Diave Inoz · June 11, 2023

Can someone tell me how it's possible to put "jump to" links on a fixed header (as on https://www.w3schools.com/howto/howto_css_fixed_menu.asp ) and have them successfully take the viewer to specific lines in the text below the header, as I've been unsuccessful in my attempts to do that.

Edited June 11, 2023 by Diave Inoz

Ingolme · June 12, 2023

If you give the target element some top padding the size of the header then the content will appear below it. Another option is to have the target element be empty and shift it upwards using "position:relative"

Diave Inoz · June 13, 2023

I can get it to work if the top links are below the header, but not when they're on the header. I've tried everything, and it just doesn't work.

Ingolme · June 13, 2023

I'd have to see your page to see exactly what the problem is and how to solve it.

If your sticky header is 60 pixels tall, then you can add 60px padding at the top of the element you're linking to, the one with the id attribute.

Diave Inoz · June 13, 2023

I've been trying to get the 3 header links to work on that "try it yourself" example, and I've managed to do it if the ID tags are 3 lines above where I want to go to, which is going to make things confusing, so I think I'll give that fixed menu header a miss.
Thanks for your help.

Ingolme · June 13, 2023

Here's an example, paste this into the TryIt editor:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}

.anchor {
  padding-top:48px;
  margin-top: -48px;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#section1">Section1</a>
  <a href="#section2">Section2</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h1>Fixed Top Menu</h1>
  <h2>Scroll this page to see the effect</h2>
  <h2>The navigation bar will stay at the top of the page while scrolling</h2>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <h2 class="anchor" id="section1">Section 1</h2>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <h2 class="anchor" id="section2">Section 2</h2>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

</body>
</html>

Sign In

"Jump to" links on a fixed header?

Recommended Posts

Diave Inoz

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Diave Inoz

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Diave Inoz

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity