Forums

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

Home Forums CSS [Solved] Fixed Menu Bar

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #45513

    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?

    #138615
    PicnicTutorials
    Participant

    Well what’s the menu you want ?

    #138616

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

    #138617
    HenryDurdan
    Member

    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.

    #138618

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

    #138629
    HenryDurdan
    Member

    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();
    });
    });

    #138635

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

    #138636

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

    #138653
    HenryDurdan
    Member

    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.

    #138662

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

    #138667
    Kuzyo
    Participant
    #138684
    Watson90
    Member
    #138814

    Ah great, thanks very much for everyones help :)

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

    #171604
    hamerw
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.