Forum Display Enhancements - Awesome Sticky Top Bar by XiTCLUB

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

LIVE DEMO : 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

[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]

Originally Posted by 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!

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]

Originally Posted by XiTCLUB

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:

PHP Code:

<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/showthrea...highlight=tabs

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

[XiTCLUB]

Originally Posted by inigo

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:

PHP Code:

<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/showthrea...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]

Originally Posted by 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,

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:

[XiTCLUB]

Originally Posted by faisaly.com

Heres a screenshot:

looks like you installed 100% :P

[faisaly.com]

grabbed from demo