Fixed navigation + linking to sections of the page = disaster

[jimmy]

Hello!

Firstly, not sure if it belongs to CSS Combat category, but I guess it will involve some CSS tinkering.

I have a fixed navigation bar which obviously follows me all the way to the bottom of the page. The problem is, I wanted to make one of the pages display content using smooth scrolling and linking to certain sections’ ids.

I have 3 sections in there, each with separate ID and 3 links which href to respective sections, like this:

1
2
2

Now, if I click the link… Well, it is taking me to the given section, yes… but the top of the section is hidden beneath the fixed nav… How to make the bottom of the fixed nav the “top” of the page, how to make it behave like that? I tried with adding padding-top to these sectionss, then it works flawlessly, but then I have this strange big whitespace if I scroll up all the way back.

Help, masters?:(

Jakub

[Senff]

First, an id can/should not start with a number.

But apart from that, you can easily fix this issue by giving the sections a top padding of X pixels, where X is the height of the menu.

EDIT: sorry, just noticed you already tried that.

[xpy]

You could put invisible “anchors” with the present ids for each section so that the page scrolls to those anchors instead of the sections, then, just position those anchors whereever it suits you most…

[SebDD]

I once fixed this with a combination of padding (which you’ve done) and negative margins to get rid of the created whitespace. Depends on your design though, isn’t possible in all situations.

[jimmy]

> I once fixed this with a combination of padding (which you’ve done) and negative margins to get rid of the created whitespace. Depends on your design though, isn’t possible in all situations.

Well, that did the trick, pitiful me, used that technique long time ago, to set full-width background bars and I didn’t even think of that now -.-

Thank you very much!

[Author]

Posts