MyBB Community Forums

Hello everyone!

This tutorial shows how to create a slide down bar.

Step1: Save your header template.

Step2: In the start of your header template, paste the following HTML code:

<div id="navcontainer1">
 
<a href="Url" title="title">Description</a>
<a href="Url" title="title">Description</a>
<a href="Url" title="title">Description</a>
<a href="Url" title="title">Description</a>

</div>

Url= any url you want to put in, for example: https://community.mybb.com/
title= any title you want to put in, for example: forum
Description= tab name, for example: Home


Step3: After pasting the above code, paste the following right after and save:

<script>
// 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 > 250 || document.documentElement.scrollTop > 250) {
    document.getElementById("navcontainer1").style.top = "0px";
  } else {
    document.getElementById("navcontainer1").style.top = "-50px";
  }
}
</script>

Step4: Now go your global.css and paste this code in the end, save it and hard refresh your browser:

#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;
}

This above .css is from my theme, you may need to adjust it as of your theme.

If you use, cloudflare, enable the development mode to see the changes.

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.

[attachment=43213]

Enjoy.