Grow your CSS skills. Land your dream job.

Nav- Static to Fixed

  • # April 29, 2013 at 10:07 am

    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?

    http://www.brandonics.com

    # April 30, 2013 at 6:27 am

    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

    # April 30, 2013 at 9:37 am

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

    You can use some jQuery – http://imakewebthings.com/jquery-waypoints

    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)

    # April 30, 2013 at 11:29 am

    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)

You must be logged in to reply to this topic.

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