• Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership from 10$ a month today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

Awesome Sticky Top Bar by XiTCLUB

Admin

Well-Known Member
Staff member
Administrator
==================
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
HTML:
<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
HTML:
#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

HTML:
<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
 

Facebook Comments

New posts New threads New resources

Back
Top