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.