Awesome Sticky Top Bar by XiTCLUB
Mod Version: 1.00, by XiTCLUB
| vB Version: 4.x.x | Rating:  (3 votes - 4.67 average) |
Installs: 22 |
| Released: 24 Apr 2013 | Last Update: Never | Downloads: 0 |
 Not Supported
 Template Edits
Re-usable Code
Translations
|
||
==================
AWESOME STICKY TOP BAR
==================
LIVE DEMO :http://www.xitclub.com/
INSTALLATION
1: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "header" template
Add The Following Code at the End
2: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "additional.css" template
Add The Following Code at the End
3: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "headinclude" template
Add The Following Code at the End
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
AWESOME STICKY TOP BAR
==================
LIVE DEMO :http://www.xitclub.com/
INSTALLATION
1: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "header" template
Add The Following Code at the End
Code:
<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
Code:
#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;
}
Add The Following Code at the End
Code:
<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
Download
No files for download.