-2

I've made a link to jump to a part of another page using the following HTML:

<a href="./about-us.html#our-mission"> Read more &#187;</a>

This is the id of the link where it goes to:

<div id="our-mission" name="our-mission">

The problem is that it is dropping me a few lines down from the heading "Our Mission" on the targeted page.

How do I get it to target the correct spot, please? Tnx.

ladyem
  • 33
  • 5
  • You need to provide a runnable example for your question. With this little info, we're not sure what your problem is – Nick Vu Mar 13 '22 at 15:44

2 Answers2

0

I guess you need to set an offset. You sould try something like this:

https://css-tricks.com/hash-tag-links-padding/

offsetting an html anchor to adjust for fixed header

This could be a solution for your problem but i need a code example for an concrete solution. the ::before pseudo class is the key.

body {
  margin:0;
}
nav {
  background: yellow;
  height: 80px;
  top:0;
  position: fixed;
  width: 100%;
}
.spacer{
  height: 80px;
}
.content{
  height: 1000px;
  width:100%;
  margin:0;
  padding:0;
}
#green {
  background: green;
}
#red {
  background: red;
}
h1 {
  margin:0;
}
h1::before { 
  display: block; 
  content: " "; 
  margin-top: -80px; 
  height: 80px;
  pointer-events: none;
}
<nav>
<ul>
  <li>
    <a href="#green">Green</a> 
  </li>
  <li>
    <a href="#red">Red</a>
  </li>
</ul>
  
</nav>

<div class="spacer">
</div>
<div class="content" id="green">
<h1>Green</h1>
</div>
<div class="content" id="red">
<h1>RED</h1>
</div>
justcasper
  • 396
  • 1
  • 17
  • Thanks, I found the answer but I've tried executing it without success. I don't have enough experience to make great changes. I'd just completed a two-week web design bootcamp before trying to create a simple website for myself. It's very exciting and challenging in equal parts. I am having to redo my website because my initial template was not very mobile friendly. At this point I don't have a lot of time or motivation to experiment or take any steep learning curves, but I can let you take a look at my full html and css, if I there is a legit way to share it privately? – ladyem Mar 14 '22 at 07:38
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/31283924) – Ervin Szilagyi Mar 14 '22 at 11:16
  • @ErvinSzilagyi Since i dont have an code-examlple i cant serve the best/right answer. It depence on the source of the problem. – justcasper Mar 14 '22 at 12:35
  • @ladyem sorry but i can't offer you free support for your page. I added an example how to solve the problem. :) – justcasper Mar 14 '22 at 12:56
  • No, problem. I'll keep going. – ladyem Mar 15 '22 at 17:01
0

Try adding this to your CSS file:

    #our-mission {padding-top:3%;}

Adjust percentage as needed.

5150 Design
  • 179
  • 14