The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Nav- Static to Fixed

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #44433

    Hello, I am somewhat new to HTML and CSS, about one year in the works so just getting to the level as to where I understand it all.

    I am in hopes that there is an easier/better solution to my nav bar I am trying to accomplish. The goal is to have two static nav bars, once the top nav bar hits the second the links should fall into it and at that point transition into a fixed nav bar which is a different size and color. You will see I had to do this with three nav bars since I am unable to figure out how to get the text on the 2nd to fall into the top one.

    Here is my example, any ideas on how I can go about this?


    The static nav on the example seems utterly pointless, it has the same elements as the nav only a few pixels above it.

    Just remove the second, and have the 1 fixed nav


    If you’re asking what I think you’re asking…

    You can use some jQuery –

    I think you can define scroll based actions – or implement a sticky nav bar (which you can then re-style using the equivalent of #nav .stuck)


    Yes, as the static example does seem pointless it does have less content which is the main navigation and its links. This is why I had to create two of them because i couldnt figure out how to get the main navigation and its links to fall into that inner container once it his a certain point. You may have to go to a a different page that offers more content to see the scrolling effect depending on the size of your screen. I think the waypoints may be it but ill have to take more time to study what exactly it is.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.