Yea everytime I copy n paste codes I also get the unnessasary Number line Right in front of it now, due to the forumotion.com's new theme or w\e
EXAMPLE...
instead of just copying the frkn code which I need to put in the CSS, I have to manulay remove every single frkn number infront of it...
EXAMPLE...
instead of just copying the frkn code which I need to put in the CSS, I have to manulay remove every single frkn number infront of it...
- Code:
1./* sticky nav main */
2.#fa_sticky_nav {
3. font-size:0; /* hide whitespace */
4. text-align:center;
5. background:#FAFAFA;
6. border-bottom:1px solid #CCC !important;
7. height:30px;
8. position:fixed;
9. right:0;
10. z-index:999;
11. overflow:hidden;
12. transition:top 200ms linear, width 600ms ease-in-out;
13.}
14.
15.#fa_sticky_nav li { display:inline } /* navlist adjustment */
16.
17.
18./* sticky menu links */
19.#fa_sticky_nav a.mainmenu {
20. color:#39C;
21. font-size:12px;
22. font-weight:bold;
23. font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
24. background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
25. display:inline-block;
26. padding:0 10px;
27. height:30px;
28. line-height:30px;
29. transition:200ms;
30.}
31.
32.#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
33. background-position:0 25px;
34.}
35.
36.
37./* sticky nav toggler */
38.#fa_sticky_toggle {
39. background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
40. border:1px solid #CCC;
41. border-right:none;
42. display:inline-block;
43. height:29px;
44. width:30px;
45. position:fixed;
46. right:0;
47. z-index:999;
48. transition:top 200ms linear;
49.}
50.
51.#fa_sticky_toggle:hover { background-position:-30px 0 }
52.
53.
54./* make hidden toolbar similar to toggler */
55.#fa_toolbar_hidden {
56. border-radius:0 !important;
57. border:1px solid #CCC;
58. border-right:0;
59. border-top:0;
60.}
61.
62.
63./* post offset fix */
64..post div[style*="-30px;"] {
65. top:-60px !important;
66.}
Dark theme : (Preview)
Code: Select Content
1./* sticky nav main */
2.#fa_sticky_nav {
3. font-size:0; /* hide whitespace */
4. text-align:center;
5. background:#333;
6. border-bottom:1px solid #222 !important;
7. height:30px;
8. position:fixed;
9. right:0;
10. z-index:999;
11. overflow:hidden;
12. transition:top 200ms linear, width 600ms ease-in-out;
13.}
14.
15.#fa_sticky_nav li { display:inline } /* navlist adjustment */
16.
17.
18./* sticky menu links */
19.#fa_sticky_nav a.mainmenu {
20. color:#CCC;
21. font-size:12px;
22. font-weight:bold;
23. font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
24. background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
25. display:inline-block;
26. padding:0 10px;
27. height:30px;
28. line-height:30px;
29. transition:200ms;
30.}
31.
32.#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
33. color:#FFF;
34. background-position:0 25px;
35.}
36.
37.
38./* sticky nav toggler */
39.#fa_sticky_toggle {
40. background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
41. border:1px solid #222;
42. border-right:none;
43. display:inline-block;
44. height:29px;
45. width:30px;
46. position:fixed;
47. right:0;
48. z-index:999;
49. transition:top 200ms linear;
50.}
51.
52.#fa_sticky_toggle:hover { background-position:-30px 0 }
53.
54.
55./* make hidden toolbar similar to toggler */
56.#fa_toolbar_hidden {
57. border-radius:0 !important;
58. border:1px solid #222;
59. border-right:0;
60. border-top:0;
61.}
62.
63.
64./* post offset fix */
65..post div[style*="-30px;"] {
66. top:-60px !important;
67.}
You can of course personalize the CSS to fit your forum. Wink
Exclamation Note : The navbar is fixed to 30 pixels in height ( height:30px; ), you can increase or remove this limit if your navlinks are becoming cut off.
2. Installing the JavaScript
Now to install the sticky navbar go to Administration Panel > Modules > JavaScript codes management and create a new script.
Title : Sticky Navbar
Placement : In all the pages
Code: Select Content
1.(function() {
2. if (!window.FA) window.FA = {};
3. if (FA.Nav) {
4. if (window.console && console.warn) console.warn('FA.Nav has already been defined');
5. return;
6. }
7.
8. FA.Nav = {
9.
10. // TARGET NODES BY VERSION
11. // PHPBB2 : .bodyline > table + table
12. // PHPBB3 : #page-header .navlinks
13. // PUNBB : #pun-navlinks
14. // INVISION : #submenu
15. targetNode : '#page-header .navlinks',
16.
17. customNav : '', // custom navlinks
18.
19. keepDefault : true, // keep the default navlinks
20. collapsible : true, // show hide button
21.
22.
23. // offset states
24. offsets : {
25. tbVisible : {
26. bottom : 30,
27. top : '30px'
28. },
29.
30. tbHidden : {
31. bottom : 0,
32. top : '0px'
33. },
34.
35. toggler : '30px'
36. },
37.
38. activeOffset : {}, // active offset for the sticky nav
39.
40. visible : false, // sticky nav is visible
41.
42. // check the state of the static nav
43. checkState : function() {
44. if (!FA.Nav.animating) {
45. var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
46.
47. if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
48. if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
49. FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
50. FA.Nav.visible = true;
51. } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
52. if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
53. FA.Nav.barSticky.style.top = '-30px';
54. FA.Nav.visible = false;
55. }
56. }
57. },
58.
59. animating : false, // sticky nav is animating
60.
61. // animate the sticky nav when the toolbar is toggled
62. animate : function() {
63. if (FA.Nav.visible) {
64. FA.Nav.animating = true;
65. FA.Nav.barSticky.style.transition = 'none';
66.
67. $(FA.Nav.barSticky).animate({
68. top : FA.Nav.activeOffset.top
69. }, function() {
70. FA.Nav.barSticky.style.transition = '';
71. FA.Nav.animating = false;
72. FA.Nav.checkState();
73. });
74. }
75. },
76.
77. // toggle sticky navigation and remember preference via cookies
78. toggle : function() {
79. if (FA.Nav.barSticky.style.width == '100%') {
80. my_setcookie('fa_sticky_nav', 'hidden');
81. FA.Nav.barSticky.style.width = '0%';
82. } else {
83. my_setcookie('fa_sticky_nav', 'shown');
84. FA.Nav.barSticky.style.width = '100%';
85. }
86. return false;
87. }
88.
89. };
90.
91. $(function() {
92. // set default offsets based on toolbar state
93. FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
94. if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
95.
96. // find the static nav
97. FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
98.
99. if (FA.Nav.barStatic) {
100. FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
101. if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
102. FA.Nav.barSticky.id = 'fa_sticky_nav';
103. FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
104. FA.Nav.barSticky.style.top = '-30px';
105.
106. document.body.appendChild(FA.Nav.barSticky); // append the sticky one
107.
108. // sticky nav toggler
109. if (FA.Nav.collapsible) {
110. FA.Nav.toggler = document.createElement('A');
111. FA.Nav.toggler.id = 'fa_sticky_toggle';
112. FA.Nav.toggler.href = '#';
113. FA.Nav.toggler.style.top = '-30px';
114. FA.Nav.toggler.onclick = FA.Nav.toggle;
115.
116. document.body.appendChild(FA.Nav.toggler);
117. };
118.
119. window.onscroll = FA.Nav.checkState; // check state on scroll
120. FA.Nav.checkState(); // startup check
121.
122. // toolbar modifications
123. $(function() {
124. // animate sticky nav and change offsets when the toolbar is toggled
125. $('#fa_hide').click(function() {
126. FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
127. FA.Nav.animate();
128. });
129.
130. $('#fa_show').click(function() {
131. FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
132. FA.Nav.animate();
133. });
134. });
135. }
136. });
137.}());
Last edited by SpyroDragon on 15/12/2015, 11:23; edited 1 time in total