Grow your CSS skills. Land your dream job.

[Solved] Fixed Menu Bar

  • # June 13, 2013 at 12:44 pm

    Im building a website for myself. and its a one big page website that the user can scroll through.

    Ive had trouble with making the menu bar I want.

    this website has a menu bar which works exactly the way id like my one to

    http://alwayscreative.net/

    could anyone help me with the coding for that?

    # June 13, 2013 at 1:18 pm

    Well what’s the menu you want ?

    # June 13, 2013 at 1:29 pm

    Just a navigation bar with 5 options on it
    just like the one on that website that has ”inspiration, process etc” on it

    # June 13, 2013 at 1:44 pm

    The sticky nav bar?

    If so, it just requires a small piece of jQuery which will attach an addition class to your nav div (for example, ‘.sticky’) and turn it to a fixed position once you scroll past the navigation with top, bottom & margins of 0.

    # June 13, 2013 at 1:47 pm

    ah right thanks very much, good to know, that would work okay with sections in html5?

    # June 13, 2013 at 2:26 pm

    Yep, just fine. jQuery should look something like this:

    $(document).ready(function() {
    var stickyNavTop = $(‘.nav’).offset().top;

    var stickyNav = function(){
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop) {
    $(‘.nav’).addClass(‘sticky’);
    } else {
    $(‘.nav’).removeClass(‘sticky’);
    }
    };

    stickyNav();

    $(window).scroll(function() {
    stickyNav();
    });
    });

    # June 13, 2013 at 3:58 pm

    Right, erm. I have my navigation div
    its called ”nav”. how would i put in this code to apply to it?

    # June 13, 2013 at 4:02 pm

    Yeah, i ended up using div’s cause it was a bit easier

    # June 13, 2013 at 6:51 pm

    Just have your ‘nav’ with a class of .nav, that way you can keep the html5 style elements of the nav selector.

    Check out my current design I am working on for an example of it in action.

    # June 13, 2013 at 8:32 pm

    im afraid i am totally confused as how to add a class to something.

    # June 15, 2013 at 6:41 am

    Ah great, thanks very much for everyones help :)

    Especially for you patient support Henry. and thanks for the tutorials Kuyzo and Watson

    # June 2, 2014 at 5:22 pm

    Great little code sample here! I am working with bootstrap3.1 and tried for 4 hours to do this sticky fixed nav trick. I did try different sticky-nav plugins but nothing worked.. I try to stay away from many plugins because they are bloated.. look at bootstrap3 scrollspy and afix.. for example.
    but then I tried one last time and found your example. It is so simple and easy.. and it works great.. even in responsive mode.

    Thanks!

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

You must be logged in to reply to this topic.

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