Grow your CSS skills. Land your dream job.

Fixed navigation + linking to sections of the page = disaster

  • # October 12, 2012 at 4:03 pm

    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

    # October 12, 2012 at 4:39 pm

    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
    # October 13, 2012 at 1:00 pm

    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…

    # October 13, 2012 at 5:44 pm

    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.

    # October 14, 2012 at 9:50 am

    > 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!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".