Slide Down Bar

[Spartak]

Slide Down Bar

Hello everyone!<br />
<br />
This tutorial shows how to create a slide down bar. <br />
<br />
Step1: Save your header template.<br />
<br />
Step2: In the start of your header template, paste the following HTML code:<br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">&lt;div id=&quot;navcontainer1&quot;&gt;

&lt;a href=&quot;Url&quot; title=&quot;title&quot;&gt;Description&lt;/a&gt;
&lt;a href=&quot;Url&quot; title=&quot;title&quot;&gt;Description&lt;/a&gt;
&lt;a href=&quot;Url&quot; title=&quot;title&quot;&gt;Description&lt;/a&gt;
&lt;a href=&quot;Url&quot; title=&quot;title&quot;&gt;Description&lt;/a&gt;

&lt;/div&gt;</code></pre><br />
Url= any url you want to put in, for example: <a href="

Please, Log in or Register to view URLs content!

" target="_blank" rel="noopener" class="mycode_url">

Please, Log in or Register to view URLs content!

</a><br />
title= any title you want to put in, for example: forum<br />
Description= tab name, for example: Home<br />
<br />
<br />
Step3: After pasting the above code, paste the following right after and save: <br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">&lt;script&gt;
// When the user scrolls down 250px from the top of the document, slide down the navcontainer1
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop &gt; 250 || document.documentElement.scrollTop &gt; 250) {
    document.getElementById(&quot;navcontainer1&quot.style.top = &quot;0px&quot;;
  } else {
    document.getElementById(&quot;navcontainer1&quot.style.top = &quot;-50px&quot;;
  }
}
&lt;/script&gt;</code></pre><br />
Step4: Now go your global.css and paste this code in the end, save it and hard refresh your browser:<br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">#navcontainer1 {
  background-color: #212121;
  position: fixed;
  top: -50px;
  width: 89%;
  display: block;
  transition: top 0.3s;
z-index: 1;
border: 2px solid black;
    margin-left: -9px;
}


#navcontainer1 a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
font-family: Helvetica,Arial,Verdana,sans-serif;
font-size: 12px;
font-weight: bold;
margin: 0px 0px 0px 200px;
padding: 15px;
}


#navcontainer1 a:hover {
color: #0072BC;
background: #000;
}</code></pre><br />
This above .css is from my theme, you may need to adjust it as of your theme.<br />
<br />
<span style="font-weight: bold;" class="mycode_b"><span style="color: #C10300;" class="mycode_color"><span style="text-decoration: underline;" class="mycode_u">If you use, cloudflare, enable the development mode to see the changes.</span></span></span><br />
<br />
In the end you will see a slide down bar as in the following screenshot, which will only appear after you have scrolled down 250px from the top of the forum and will disappear when you scroll back to the top.<br />
<br />
<!-- start: postbit_attachments_attachment -->
<br /><!-- start: attachment_icon -->
<img src="

Please, Log in or Register to view URLs content!

" title="PNG Image" border="0" alt=".png" />
<!-- end: attachment_icon -->&nbsp;&nbsp;<a href="attachment.php?aid=43213" target="_blank" title="">Cattura.PNG</a> (Size: 55.96 KB / Downloads: 211)
<!-- end: postbit_attachments_attachment --><br />
<br />
Enjoy.

Please, Log in or Register to view URLs content!