Nobody answered my thread and I have figured out how to do this so now I am going to show you all how I did this.
Step 1: Locate your default or custom navigation menu
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.
<div id='onlinedevelopersnoti' style='display: block; margin-top: 0px;'> </div>
Since I wanted to make the UserCP, ModCP, AdminCP, PMs, & Logout button to be sticky I had to wrap this around
<div id="panel">
So your code should look like this!
<div id='onlinedevelopersnoti' style='display: block; margin-top: 0px;'> <div id="panel"></div>
Now we must create the div id "onlinedevelopersnoti.css"
Go to Template & Styles > Themes > Your theme > add stylesheet
Step 1: Name the file "onlinedevelopersnoti.css"
Step 2 : Where is says attach to check the radio option Globally
Step 3: Check the option "Write My Own Content"
Step 4: Paste the code in below
#onlinedevelopersnoti {
display: none;
margin: 0;
padding: 0;
position: fixed;
margin-top: -31px;
z-index: 999999;
width: 100%;
height: 22px;
}
Save changes and you are done!
Here is some useful information you may not know!
If you want to add a background color to your menu panel in our .css file we just made add this.
background-color: #COLORCODE;
So your code should look like this.
#onlinedevelopersnoti {
display: none;
margin: 0;
padding: 0;
background-color: #COLORCODE;
position: fixed;
margin-top: -31px;
z-index: 999999;
width: 100%;
height: 22px;
}
Where it says #COLORCODE actually goes the color's code if you don't know what a code is for a certain color here is a link to show you.
All the colors
Now some of you may want your background color for the bar to be bigger or smaller to do this we have to adjust height in our onlinedevelopersnoti.css.
Issue You May Run Into
This does not happen to everyone but depending on how you coded your website you may see when looking at your sticky menu it is not exactly sticking to the top of the page and you may see a gap or it is cut off on the top because your sticky menu is too far up.
To fix that we must go to our header where we added our wrap code around the div we want to make sticky
<div id='onlinedevelopersnoti' style='display: block; margin-top: 0px;'> </div>
Margin-top is the spacing of the sticky menu from the top of your website at 0px it should look normal to you but if you are experiencing your words being cut off because the menu is too far up then we must increase this number. Play with the 0px until you see the sticky menu the correct way you would like this adjusts the spacing from the top.
Another Cool Trick!
You can also make the footer sticky as well and the instructions are above are for your navigation menu. There is another way to make the members panel sticky and this way will actually make it look more polished.
Step 1: Add this code into the global.css of your theme
.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%;
}
Where the code begins #footer is what makes the footer sticky if you do not want the footer sticky just delete all the lines beginning from $footer .upper { and below.
Step 2: Add this code into your headerinclude template which is located in;
Admin Cp >> Templates & Styles >> Templates >> Your Theme > Ungrouped Templates > 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>
Save changes and your done.
Since nobody helped me bah humbug!
I hope my post here helps you out today.