vb.org Archive
Page 1 of 4 1 23 Last »
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   Forum Display Enhancements - Awesome Sticky Top Bar by XiTCLUB (https://vborg.vbsupport.ru/showthread.php?t=297532)

XiTCLUB 04-23-2013 10:00 PM
Awesome Sticky Top Bar by XiTCLUB
 
1 Attachment(s)
==================
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
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;
}
3: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "headinclude" template

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

thang28101993 04-24-2013 06:48 AM
Oh, I'm the first person, but after added your codes nothings change for me!
Please check again! Thanks!

bjarne2 04-24-2013 07:42 AM
Works unfortunately not :down:

XiTCLUB 04-24-2013 08:20 AM
Quote:
Originally Posted by thang28101993 (Post 2418202)
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 04-24-2013 08:22 AM
I have no idea what this should even do,

XiTCLUB 04-24-2013 08:28 AM
have edited some code, please re-use the "headinclude" portion

XiTCLUB 04-24-2013 08:29 AM
Quote:
Originally Posted by New Joe (Post 2418214)
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 04-24-2013 09:28 AM
Not working for me, after inserting your code.

Nothing happens,

XiTCLUB 04-24-2013 10:31 AM
Quote:
Originally Posted by inigo (Post 2418224)
Not working for me, after inserting your code.

Nothing happens,
Your forum link ?

thang28101993 04-24-2013 11:54 AM
Quote:
Originally Posted by XiTCLUB (Post 2418234)
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!


All times are GMT. The time now is 03:21 PM.
Page 1 of 4 1 23 Last »
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01216 seconds
  • Memory Usage 1,744KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_code_printable
  • (4)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete