Link does not go to correct destination

If u click http://test.uhfworld.org/journey-so-far-2/#past_project it doesnt go to PAST PROJECTS

if u click Problem Statement like below

the link doesnt scroll down to Problem Statement instead it scroll down to section below Problem Statement

http://test.uhfworld.org/about-uhf/#x

same problem with all link

As far as I can see, the links work as expected. The problem is that the sticky header is overlapping the top of each section.

If you disable JavaScript to get rid of the header, you’ll see where the links go.

1 Like

but still problem is dere even after reduce menu item or disable sticky menu option
how do i disable JavaScript

I use the NoScript add-on in Firefox. In Chrome, I think you can toggle JavaScript by clicking on the “site information” at the left of the address bar.

As always it helps to validate your HTML and CSS.

The validator found 142 errors and warnings.

3 Likes

You don’t seem to be understanding the problem.

The page is scrolling to the link as required but your fixed header is hiding it. Fixed elements are removed from the flow and will not react with the rest of the page.

If I set the header opacity then you can see that indeed the page did scroll to the right place.

When you use fixed headers they will sit on top of whatever is in the way. The page will not scroll to magically avoid them.

You would need to program an offset into your destinations that matches the height of the header but is not an easy task.

A ‘hacky’ way to avoid content sitting under the header using html and css only is to position a destination link the same distance away from the content that matches the height of the header.

Here’s an old codepen that shows the technique in action.

https://codepen.io/paulobrien/pen/bpepaq

It’s pretty fragile and relies on the header always being the same height.

4 Likes

I made dis bt transparency make dis problem

Paul’s suggestion to use transparency was to let you see what was happening, not as a solution to the problem.

Have you looked at the techniques he suggested to solve the problem?

1 Like

The transparency I added to the header was not meant as a solution but as a method to show you that indeed the page was scrolling to the correct destination.

I gave you two solutions above which would move the page downwards without having to introduce 120px of white space ** as you seem to have done now with your empty div approach.** You could have used the second method I showed above using the absolutely placed id and that would not have introduced white space into your layout.

However, it seems that perhaps you are not able to make those changes correctly so you may have to live with what you have now :slight_smile:

4 Likes