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

[DemOnstar]

Seems a good idea, tagged for now..

One question: The navbar is in 2 parts.



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]

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

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

[thetechgenius]

Originally Posted by ozzy47

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.