I want to make navbar appear with scroll, as well

Question

I want to  make nav bar appear with scroll ,  like facebook

thanks for your help

Answer 1

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

    });

 

Comments

Bro I am new please steps by step :)

---

I need help in doing this please.

---

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

---

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

Answer 2

Just change css:

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

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

Comments

Change it to what :) New to CSS please help

---

just add above css to your qa-styles.css

---

nope it doesn't work

Answer 3

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

#qa-login-bar {

    background: none repeat scroll 0 0 #8CBF26;

    border-bottom: 1px solid #7DB018;

    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);

    height: 30px;

    margin-bottom: 0;

    margin-left: 0;

    margin-right: 0;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 999;

}

 

.qa-body-wrapper {

    margin: 35px auto 2%;

    text-align: left;

    width: 1000px;

}

.qa-nav-user {

    color: #FFFFFF;

    float: left;

    font-size: 12px;

    margin: 5px 0 4px;

    white-space: nowrap;

}

 

Add this,

 

#qa-login-group a {

    color: #FFFFFF !important;

}

#qa-login-group a:hover {

    color: #FFFFFF !important;

    text-shadow: 1px 1px #AAAAAA;

}

 

Comments

Thanks Brother :)

---

Thank you so much At last I got what I needed :) Thanks again

---

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 ????