Same page links cutting off content with fixed top navbar. Need help

When you click the links in my navbar, part of the content they are jumping to gets cut off. I remember running into this issue last year when working on the legacy portfolio page. The solution I got at the time was to put a div above the area I wanted to jump to and then link to that. There must be a better way but I can not for the life of me find it. Any help? Even if you can just point me to reading material it would be much appreciated.

Also, I have this in my code:

.main-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: 
    "title title title title title"
    "video video details details details"
    "form form form form form"
    "footer footer footer footer footer";

If I’m defining a grid-template-areas do I need to define grid-template-columns(or rows)?

Cheers

1 Like

Found this and it seems to work.

#idname {
    padding-top: 100px;
    margin-top: -100px;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}

Hello,

If you would like to create an offset for your anchor links then you can do so with this.

:target {
  display: block;
  position: relative;
  top: -50px; /* this is your offset */
  visibility: hidden;
}

Considering your header/nav is a different height on each breakpoint you will need to change this offset on each breakpoint.

Hope that makes sense.

2 Likes

Thank you for the reply. I can not get this to work for me. I put this in my code:

:target {
  display: block;
  position: relative;
  top: -90px; /* this is your offset */
  visibility: hidden;
}

and the offset works but the divs I am jumping to become hidden when I click on their respective links. Here’s a fork with the new code in it.

What am I missing?

Sorry, I didn’t check out your HTML. You will need to change it slightly if you would like my solution to work. Here’s how the HTML for the features section would look:

      <div class="video-div">
        <a id="features"></a>
        <iframe id="video" src="https://www.youtube.com/embed/2FVfJTGpXnU"></iframe>
      </div>

You will need to change this in the other sections you are anchoring to.

The CSS would still be:

:target {
  display: block;
  position: relative;
  top: -90px; /* this is your offset */
  visibility: hidden;
}

And remember you will need to change the offset at each media query breakpoint you have set.

2 Likes

Thank you so much. This is the solution I was looking for. You saved me many hours.