Link to anchor on page without fixed nav section overlap

My website has a nav section that is fixed to the top of the home page, as you scroll. The second section of the home page has several buttons that link to various other sections, which I’ve given anchor points. When I click on a button it scrolls to the top of the intended section, but the fixed nav section is covering up part of the top.

This is a common issue, and I’ve found several threads with seemingly simple solutions but I can’t get any of them to work on my site. I’m trying to use the top solution in this thread, which calls for adding the below code to the page, customizing the class and height/margin numbers, as well as “adding a new class with a ::before style to each element.”

The latter part is confusing me, and I’ve tried every iteration of what I believe that to mean, looked at the page source of the example project and tried to set up my code the same, and I think I just don’t know enough about inserting code like this to catch the bugs I’m creating.

.newclass::before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}

Would anyone be willing to take a look at my site and try out this solution? Or, explain how I would go about “adding a new class with a ::before style to each element?” Below is my read only link. I’d greatly appreciate any help.

https://preview.webflow.com/preview/dan-kanvis-99f7b85b7718f3-99eca631d2d7d?utm_medium=preview_link&utm_source=designer&utm_content=dan-kanvis-99f7b85b7718f3-99eca631d2d7d&preview=5394bb75cab2bcc9e494f84c281dd3d0&workflow=preview
Note: The green “Album Artwork” button links to the top of the “Design for Music” section, which has an ID of “design-for-music.”

hi @dankanvis it is easy to solve all you you have to do is to add padding to section for example 50-100% of navigation height. You do not need custom code for this.

just in case here is a video to help understand how CSS works.

https://cln.sh/zh6k4l

Hey @Stan - thanks so much for your response and taking the time to record this video. I understand your solution, but it requires me to add unwanted padding or margins to the top of my sections, changing the look and spacing of my site as someone scrolls throughout. That’s why I’m seeking to implement some sort of code, so I can maintain my current design.

Any insight on a solution that tells the nav to stop before it reaches the overlapping rest point?

hi @dankanvis Sorry that you didn’t find provided solution useful as it is IMO how things are mainly done.

You have mentioned change in current design. Yes standard behaviour of elements stacking order (flow) should be taken in consideration when you build (design) one-page website with links to section while nav is fixed.

But even after website is already build as in your case it can be changed to have perquisite design just by using padding and/or margin on element above and/or element below. When you combine values on both elements you will get exact result as before and your element stops under your navigation as expected.

As in programming is many ways how to achieve same result there is another approach by using Intersection Observer if you are comfortable with JS but this is IMO unnecessary overkill for this simple task.

Hope that you will find explanation and possible option helpful but feel free to use your favourite browser to search other possible solutions.

Happy no-coding :wink:

@Stan I hear you, I just don’t want to add extra padding, since my nav section is larger than the current padding (above and below combined) between my sections. I’d rather not shorten my nav either.

It seems like the leanest solution is still that bit of code I mentioned. Since my site is still very much a work-in-progress, I’m going to wait it out on that. Will look into Intersection Observer though, too. And will consider the padding solution if all else fails.

I really appreciate your help!

Hi @dankanvis It is totally fine with me. If you are convinced that using standard methods will have bad impact on user experience (UX) when visiting your website that user will notice that you have used CSS padding then use intersection observer. As I have mentioned there is many ways to achieve same goal. :wink:

Hi @dankanvis I see that you are not able implement ::before

Here is a simple example to study. Hope that his will help you to implement this approach. Scroll to section example is on Home link.

Have a good one :wink:

hi @ Neva you been able to create your design with help of provided demo to study ? Do you need further explanation to help you understand how thing are done? If not feel free to close your request as solved.

Hey @Stan, I was able to get it working without code. I actually had my nav set to sticky before. Once I switched it to fixed, all I had to do was add a margin that is the height of my nav to the top my hero section. With the nav fixed, it recognizes that padding when reaching all of the anchor points throughout my page.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.