Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
0 votes
2.0k views
in Q2A Core by
I want to  make nav bar appear with scroll ,  like facebook

thanks for your help

3 Answers

0 votes
by

Its easy You need to use jQuery :-), I used these features in many themes (You can see my work in themeforest).

Here is the simple code, just replace ".top-nav"  with your own css class:

    var menuOffset = jQuery('.top-nav')[0].offsetTop; // replace #menu with the id or class of the target navigation

    jQuery(document).bind('ready scroll',function(){
       var docScroll = jQuery(document).scrollTop();
       console.log(docScroll);
       console.log(menuOffset);
        if(docScroll >= 155){
           jQuery('.top-nav').addClass('fixed');
        } else {
           jQuery('.top-nav').removeClass('fixed');
        }

    });

 

by
Bro I am new please steps by step :)
by
I need help in doing this please.
by
OK, tell me which thing you want to stick to top?? is it menu or top bar??? are you interested in java script or css??? note:css will be easy
by
Yes I can do it in CSS ,

I want the upper bar with my account , my updates links to move with scroll, thanks For help
0 votes
by

Just change css:

#qa-login-bar { poisition: fixed; top: 0; z-index: 99999}

.qa-body-wrapper { margin-top: 30px }

by
Change it to what :) New to CSS please help
by
just add above css to your qa-styles.css
by
nope it doesn't work
0 votes
by

Replace these CSS to style.css in snow (ou your theme)  theme folder (I assumed that you know the theme folder),

#qa-login-bar {
    backgroundnone repeat scroll 0 0 #8CBF26;
    border-bottom1px solid #7DB018;
    box-shadow0 0 10px 0 rgba(0, 0, 0, 0.15);
    height30px;
    margin-bottom0;
    margin-left0;
    margin-right0;
    positionfixed;
    top0;
    width100%;
    z-index999;
}
 
.qa-body-wrapper {
    margin35px auto 2%;
    text-alignleft;
    width1000px;
}
.qa-nav-user {
    color#FFFFFF;
    floatleft;
    font-size12px;
    margin5px 0 4px;
    white-spacenowrap;
}
 
Add this,
 
#qa-login-group a {
    color#FFFFFF !important;
}
#qa-login-group a:hover {
    color#FFFFFF !important;
    text-shadow1px 1px #AAAAAA;
}

 

by
Thanks Brother :)
by
Thank you so much At last I got what I needed :) Thanks again
by
Ok I have learnt a lot of CSS in past days , I want to ask I can add icons for my updates and things like this , I want to  know were to add them ????
...