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
  • #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

    could anyone help me with the coding for that?


    Well what’s the menu you want ?


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


    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.


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


    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) {
    } else {


    $(window).scroll(function() {


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


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


    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.


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


    Ah great, thanks very much for everyones help :)

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


    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.


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