Streaming live at 10am (PST)

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.

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: