CODEWITHSUNDEEP
htmlcssanchor-scroll
user3616665
user3616665

Reputation: 1

How to control anchor display position with a fixed position nav

I am making a single page scrollable website and I set my links to anchors along the page. All works fine except that the anchor will be displayed at the top of the page as default and it is covered by the fixed nav bar (73px height). Is there any way of setting the display position 73px down from the top? All the elements already have their positions, paddings, margins etc :-/

Here is the website http://www.drawlight.net/wordpress/?page_id=1784

I really appreciate the help!

Juliana.

Upvotes: 0

Views: 528

Answers (1)

SW4
SW4

Reputation: 71140

Demo Fiddle

Change the href of the scroll-to-top anchor to, e.g. #this_is_the_top

Then before it in your HTML add:

<a id='this_is_the_top'>top</a>

nb. You dont have to specifically add an a, any element with that id will work.

And also add the CSS

#this_is_the_top{
    position:absolute;
    top:73px;
}

At present, you are simply targetting the top of your page with the scroll position, as you're href is simply '#', you want to target a specific element which is offset from the top (using position and top).

Upvotes: 2

Related Questions