MyBB Community Forums

When you visit few sites  you see a  navigation menu that  sticks to the top of your window as you scroll down a page. So  you never have to scroll back to the top of a page to navigate  the menu. In this tutorial, I'll show you how to create this Flating Nar Bar

Step 1: Locate the  custom/default  NAvBar location
Step 2 : Admin Cp >> Templates & Styles  >>  Templates >>   your theme >> Header Templates > Edit Header >> Now add the codes given below anywhere you need. If you have a NavBar,  paste the codes  between the codes. This is the location is my Navbar

Quote: <div id='onlinedevelopersnoti' style='display: block; margin-top: 0px;'> 

( NAVBAR codes Here | If you have a custom made Navbar codes place it here. )

</div>

Now save the codes..

Step 3:  Now go to theme >> your theme >>  Add style sheets 
          File name          :  onlinedevelopersnoti .css
         Attached to       :    Globally 

then choose write my own content. Then paste the css cods given below and save it 

Quote:#onlinedevelopersnoti {

    display: none;
    margin: 0;
    padding: 0;
    position: fixed;
    margin-top: -41px;
    z-index: 999999;
    width: 100%;
    height: 41px;
}

If you Don't have a custom NavBar Here is a simple one, Place it between the First code. The NavBar given Below is an example there are no  styles added 

Quote:<ul>

            <li class="last"><a href="rules.php"><span>Rules</span></a></li>
            <li class="last"><a href="about.php"><span>About Us</span></a></li>
            <li class="last"><a href="myawards.php"><span>Awards</span></a></li>
            <li class="last"><a href="stickies.php"><span>All Stickies</span></a></li>
            <li class="last"><a href="contact.php"><span>Contact</span></a></li>
          </ul>

Now check you site, you will see a  floating NavBar, If you need more detailed description with image, then contact me or replay . hope you have understood.

Coming Soon: Attractive Floating  Announcement Bar http://community.mybb.com/thread-180205.html  and more

some of the codes seems to be missing alil.
also use this when trying to fix something to a position.

it works better then margin. with margin it can actually make the layout more messed up then do good.

 position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;

(2015-09-21, 09:24 PM)leroymcqy Wrote: [ -> ]some of the codes seems to be missing alil.
also use this when trying to fix something to a position.

it works better then margin. with margin it can actually make the layout more messed up then do good.

 position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;

top:0;
left:0;
right:0;
bottom:0;  this will take a  lot of text, so i didn't add them. Done a shortcut way. Any way thank you for sharing your codes  

Wrong section

Nice tutorial, I have used it on my forum and blog works great.

This is amazing tutorial that worked but I cannot get the text to display horizontally. How may I get the text to display horizontally instead of vertically?

(2015-09-21, 09:24 PM)leroymcqy Wrote: [ -> ]some of the codes seems to be missing alil.
also use this when trying to fix something to a position.

it works better then margin. with margin it can actually make the layout more messed up then do good.

 position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;

The correct code would be the following:

position: fixed;
 top:0;
left:0;

And technically since it's width is set to 100% it doesn't need a left: 0;
Your code would mess up the navbar to technically "stretch" it on the whole page because you set it's "bottom" to 0 which means the distance between it and the bottom and it is 0. Adding to that the z-index: 99999, this would remove your ability to click anything correctly on the page.

(2016-12-26, 10:24 PM)Krados Wrote: [ -> ]

(2015-09-21, 09:24 PM)leroymcqy Wrote: [ -> ]some of the codes seems to be missing alil.
also use this when trying to fix something to a position.

it works better then margin. with margin it can actually make the layout more messed up then do good.

 position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;

The correct code would be the following:

position: fixed;
 top:0;
left:0;

And technically since it's width is set to 100% it doesn't need a left: 0;
Your code would mess up the navbar to technically "stretch" it on the whole page because you set it's "bottom" to 0 which means the distance between it and the bottom and it is 0. Adding to that the z-index: 99999, this would remove your ability to click anything correctly on the page.

Thanks 
Maybe I will need u later!

If you do not have the need for an entirely different nav bar..., You can simply also make your upper and lower user panel as well as footer fixed just like it is in the devel theme if that is of any interest to anyone:

add to headerinclude:

<!-- Fixed Upper Panel -->
<script type="text/javascript">
$(document).ready(function() {
    $(document).scroll(function () {
        var headHt = $("#header").height()-64;
        if ($(this).scrollTop() > headHt) {
        $('#panel').addClass('fixed');
        }
        else {
        $('#panel').removeClass('fixed');
        }
    });
});
</script>

in global.css

.fixed {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    opacity: 0.9;
}

#footer .upper {
    background: #efefef;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 6px;
    font-size: 12px;
    overflow: hidden;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

example:

how can you make this into a floating sidebar. say 250px wide x 350 in height. i can use something like that.