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]

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]

Originally Posted by thang28101993

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]

Originally Posted by New Joe

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]

Originally Posted by inigo

Not working for me, after inserting your code.

Nothing happens,

Your forum link ?

[thang28101993]

Originally Posted by XiTCLUB

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!