Awesome Sticky Top Bar by XiTCLUB

[XiTCLUB]

==================
AWESOME STICKY TOP BAR
==================

LIVE DEMO : WWW.XiTCLUB.COM (http://www.xitclub.com/)

INSTALLATION

1: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "header" template

Add The Following Code at the End

<div id="stickyBar">
<ul>
<li><a href="#">Link1 </a></li>
<li><a href="#">Link 2 </a></li>
<li><a href="#">Link 3 </a></li>
<li><a href="#">Link 4 </a></li>
<li><a href="#">Link 5 </a></li>
</ul>
</div>



2: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "additional.css" template

Add The Following Code at the End
#stickyBar
{
background: rgba(0,0,0, 0.8);
border-radius: 0 0 0.5em 0.5em;
display:none;
height:40px;
}
#stickyBar ul
{
margin:0px;
padding: 0;
list-style:none;
}
#stickyBar ul li
{
float:left;
min-width:80px;
text-align:center;
border-right:1px solid #ccc;
font-size: 16px;
height: 40px;
line-height: 2.5em;
padding:0 5px;
}
#stickyBar ul li a
{
color:#fff;
display: block;
width:100%;
height:100%;
}
#stickyBar ul li a:hover
{
background: red;
color:#fff;
}
#stickyBar.stick {
position: fixed;
top: 0;
z-index: 10000;
width:1000px;
margin:0 auto;
background: rgba(0,0,0, 0.8);
border-radius: 0 0 0.5em 0.5em;
display: block;
}

3: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "headinclude" template

Add The Following Code at the End


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('.above_body').offset().top;
if (window_top > div_top) {
$('#stickyBar').addClass('stick');
} else {
$('#stickyBar').removeClass('stick');
}
}

$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
That's it... Enjoy Sticky Top Navigation By XiTCLUB

Update : Updated The Whole Tutorial, because most of peoples are not familiar with programing

You can Buy me a bear if you like this modification, paypal button is at right sidebar :D

[thang28101993]

Oh, I'm the first person, but after added your codes nothings change for me!
Please check again! Thanks!

[bjarne2]

Works unfortunately not :down:

[XiTCLUB]

Oh, I'm the first person, but after added your codes nothings change for me!
Please check again! Thanks!

Be sure you have added Latest jQuery Library in your headinclude

[New Joe]

I have no idea what this should even do,

[XiTCLUB]

have edited some code, please re-use the "headinclude" portion

[XiTCLUB]

I have no idea what this should even do,

Visit the demo link and scroll down. you will see a sticky menu at top that will remain at top when you scrolling down

[inigo]

Not working for me, after inserting your code.

Nothing happens,

[XiTCLUB]

Not working for me, after inserting your code.

Nothing happens,

Your forum link ?

[thang28101993]

Your forum link ?

I updated second times but still no things change!

Would you mind if connect to my computer to check?
My forum still build in local!
Thanks in advanced!

P.s:
TeamViewer ID:
Password:

I'm online now!

[thang28101993]

Thanks for your support!
I tried, but Can't do it for my forum as yours! Please check again and tell us the way clearly, how can do!

Thanks!

[XiTCLUB]

Thanks for your support!
I tried, but Can't do it for my forum as yours! Please check again and tell us the way clearly, how can do!

Thanks!

I have showed the way how you can stick a bar at top. but bar style is not my concern, everyone can style their bar

[inigo]

Your forum link ?

I have it in local, not live.

I will continue subscribed to this post to see if it is any solution,

Thanks!

EDIT: How can I check the jquery version the system is loading? and where can I change it?
I have this in HEDINCLUDE template:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>



Perhaps the problem is that I have the Tab menu mod installed,...:
https://vborg.vbsupport.ru/showthread.php?t=233629&highlight=tabs

I have to check more in detail where is the problem.

[XiTCLUB]

I have it in local, not live.

I will continue subscribed to this post to see if it is any solution,

Thanks!

EDIT: How can I check the jquery version the system is loading? and where can I change it?
I have this in HEDINCLUDE template:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>



Perhaps the problem is that I have the Tab menu mod installed,...:
https://vborg.vbsupport.ru/showthread.php?t=233629&highlight=tabs

I have to check more in detail where is the problem.

Updated The Tutorial

[Bluefin221]

Works better as an iframe this.

[inigo]

XiTClub, thanks very much for the tutorial, I have finally it working changing #navigation to #navtabs in your previous tutorial.

The only problem is the floatcontainer below the navtabs, is showed only the text without background color,... I am trying to improve this ;)

This new tutorial is good too, but the previous one is perfect when optimized.

I suggest both tutorial in 1st post,m because depending of the user, one of them could be slightly better ;)

Thanks a lot, mark as installed and 4 stars at the moment, but if i can finish with the floatcontainer below the navbar 5 stars,

[XiTCLUB]

XiTClub, thanks very much for the tutorial, I have finally it working changing #navigation to #navtabs in your previous tutorial.

The only problem is the floatcontainer below the navtabs, is showed only the text without background color,... I am trying to improve this ;)

This new tutorial is good too, but the previous one is perfect when optimized.

I suggest both tutorial in 1st post,m because depending of the user, one of them could be slightly better ;)

Thanks a lot, mark as installed and 4 stars at the moment, but if i can finish with the floatcontainer below the navbar 5 stars,

Good to know :)

1st tutorial was for professionals and when i came to know that everyone here complaining its not working because of their own lack of knowledge bout HTML, CSS, jQuery. so i have decided to make it simpler :P

[faisaly.com]

Heres a screenshot:

https://vborg.vbsupport.ru/

[XiTCLUB]

Heres a screenshot:

http://i633.photobucket.com/albums/uu53/mansonklan/stickybar_zpsfd943520.png

looks like you installed 100% :P

[faisaly.com]

grabbed from demo

[inigo]

Thanks for your help!!!!!!!!

Finally I can manage with it without knowing so much of css and html.

Recommended!!!!!!

[XiTCLUB]

Thanks for your help!!!!!!!!

Finally I can manage with it without knowing so much of css and html.

Recommended!!!!!!

Congratulations :P

[Bob_R]

Cool! Nice work.

Is this one mod (see screenshot) available/supported?

[XiTCLUB]

Cool! Nice work.

Is this one mod (see screenshot) available/supported?

No, This mod is not available yet

[elitecarders]

Shahzad saab you have a cool forum best of luck i am paki too :D

[XiTCLUB]

Shahzad saab you have a cool forum best of luck i am paki too :D

Thank You Bhai Sahb.. :D

[fxdigi-cash]

Thanks for mod!

However, I have to mention that this script is not compatible with any query version except jquery.min.js so for those who the code didn't for them, I guess it is compatibility issue.

Being said that, we have to add extra script to the header while there are many others already there. I believe it is better to take the advantage of the other used jquery versions that are already in used at vb header....

I know if you decided to change the whole code, it may take some time to re-create the java script that is compatible with all jquery versions.... or at least the one used at vb header...

Thanks

[XiTCLUB]

Thanks for mod!

However, I have to mention that this script is not compatible with any query version except jquery.min.js so for those who the code didn't for them, I guess it is compatibility issue.

Being said that, we have to add extra script to the header while there are many others already there. I believe it is better to take the advantage of the other used jquery versions that are already in used at vb header....

I know if you decided to change the whole code, it may take some time to re-create the java script that is compatible with all jquery versions.... or at least the one used at vb header...

Thanks

its already compatible, dont just look at code, try to use it without google jquery library tht i included in code

[fxdigi-cash]

its already compatible, dont just look at code, try to use it without google jquery library tht i included in code

I didn't look at the code, I tried it with many jquery versions and the only one that works with your code is jquery.min.js

you can try it out and see yourself if it functions with other jquery versions if you like ...

[HotLink]

It was not working in my IE and if anyone has the same problem, here is how i fixed it:

I replaced:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
with:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">


Also, i've added a solid background-color to #stickyBar, a line before the background: rgba(0,0,0, 0.8);

@XiTCLUB
Is there anyway to get the bar displayed after the page scrolls a certain number of px from the top?
By the way, awesome indeed!:)

[DemOnstar]

Seems a good idea, tagged for now..

One question: The navbar is in 2 parts.

https://vborg.vbsupport.ru/attachment.php?attachmentid=146802&stc=1&d=1381742142

Does this mod stick both parts or just the top bar?
I would also like to stick the lower part also..

Thanks.

[tigrattack]

Great looking site you have

[DemOnstar]

It is a good looking site...

http://www.xitclub.com/

[thetechgenius]

I changed this to work best with my forum. And I also changed it to work with the User Info bar at the top of my forum, not the nav bar.

Check it out: https://thetechgenius.net/

You must be logged in to see the User Info Bar at the top of the page though.

[ozzy47]

I changed this to work best with my forum. And I also changed it to work with the User Info bar at the top of my forum, not the nav bar.

Check it out: https://thetechgenius.net/

You must be logged in to see the User Info Bar at the top of the page though.

Why make a member register to see your changes?
Provide a demo account users can log in with to view. :)

[thetechgenius]

Why make a member register to see your changes?
Provide a demo account users can log in with to view. :)

You are 100% correct, I am so sorry about that. I don't know what I was thinking. LOL.

Demo Account Info
Username: guest
Password: user


The Navbar is not the sticky bar. I made it so the "Welcome" User info bar is sticky, and stays at the top when your scroll.

I am also uploading a screenshot to this post to show you what I mean, if you dont want to login to my forum to see for yourself. (See the attached image below)

Edit: I dont know why the image lost a lot of its quality, it looks very blurry for some reason. Sorry about that.