Hello
Welcome to Slightly Insane! You are currently not logged in, so some parts of the forum are partially hidden. Join us to get access to the community and all of our members-only content, including ProBoards themes, codes, graphic design resources, and more!
Sticky Menu Bar layout template
Oct 16, 2013 17:26:17 GMT -5
This effect is achieved with two simple techniques: first, a minor template mod moves the menu bar's HTML above the forum wrapper; second, a snippet of CSS overrides a handful of default styles to bring it all together. Without the CSS, your menu won't stick, so don't leave it out!
Sticky Menu Bar
W/ FIXED PAGINATION - BY ELLI
This effect is achieved with two simple techniques: first, a minor template mod moves the menu bar's HTML above the forum wrapper; second, a snippet of CSS overrides a handful of default styles to bring it all together. Without the CSS, your menu won't stick, so don't leave it out!
- Credit is neither required nor requested, but please don't claim as your own.
- This may be reposted anywhere, so long as this post's header remains intact.
TEMPLATE MOD PORTION:
- Navigate to Admin > Structure > Layout Templates > Forum Wrapper
- Find the following snippet of your menu bar's HTML:
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest. Please $[login_link] or $[register_link].
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div> - Select this block of text, then press CTRL + X on your keyboard to cut
- Find the following snippet of code, and create a new line just under the closing {/if}:
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if} - On the new line you just created, press CTRL + V on your keyboard to paste
CSS PORTION:
- From the admin panel, navigate to Themes > Advanced Styles & CSS > Stylesheet
- Scroll to the absolute bottom of your template's stylesheet
- Paste the following CSS snippet to override the default styles:
/* ==========================================================================
STICKY MENU CSS BEGINS HERE
========================================================================== */
#wrapper {
/* This number should be the preferred distance between your header and
the menu bar PLUS the height of your menu bar */
margin-top: 50px;
}
#navigation-menu {
width: 100%;
position: fixed;
top: 0;
z-index: 9999;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container>.control-bar {
/* This number should be the height of your menu bar */
top: 31px !important;
}
/* ==========================================================================
END OF STICKY MENU CSS
========================================================================== */That's it! You're done.
Oct 17, 2013 10:33:23 GMT -5
Thanks, bruh
Thanks, bruh
Jan 5, 2014 18:04:00 GMT -5
So this works on every page right? What about the #wrapper, I currently use #wrapper for the table around the whole forum, would this break it or override it and cause conflicting codes?
Um, layout templates and CSS are global for the skin they're being used on... so yes, it will work on every page. #wrapper is a ProBoards default.
Um, layout templates and CSS are global for the skin they're being used on... so yes, it will work on every page. #wrapper is a ProBoards default.
Jan 8, 2014 22:42:17 GMT -5
So this works on every page right? What about the #wrapper, I currently use #wrapper for the table around the whole forum, would this break it or override it and cause conflicting codes?Um, layout templates and CSS are global for the skin they're being used on... so yes, it will work on every page. #wrapper is a ProBoards default.
I think tater2dope might have meant a "border around forum" sort-of wrapper? I don't think it would conflict with that either, though.
I've linked this to a few people already, lovely code elli <3
I think tater2dope might have meant a "border around forum" sort-of wrapper? I don't think it would conflict with that either, though.
I've linked this to a few people already, lovely code elli <3
Jan 9, 2014 11:18:57 GMT -5
Um, layout templates and CSS are global for the skin they're being used on... so yes, it will work on every page. #wrapper is a ProBoards default.I think tater2dope might have meant a "border around forum" sort-of wrapper? I don't think it would conflict with that either, though.
I've linked this to a few people already, lovely code elli❤
Does the border around forum use #wrapper? I've never looked. I don't imagine it would conflict
Thanks for linking
I've linked this to a few people already, lovely code elli❤
Does the border around forum use #wrapper? I've never looked. I don't imagine it would conflict
Thanks for linking
Jan 24, 2014 13:42:04 GMT -5
I've ran into a few issues since adding this template mod, the first being the "back to top" plugin (back to bottom) doesn't work. I have requested help from the plugin creator about this but heard nothing back at all.
The second issue would be how do we turn off the fixed pagination thing please? I'd rather not have his actions bar, scrolling with the pages thank you.
And the final thing is more of a question. Would it be possible to have a vertical menu bar while using this template mod, if so how would I go about that please? & Thank you
twds.proboards.com is where the back to top can be seen (not working) when you click back to bottom in Chrome.
The second issue would be how do we turn off the fixed pagination thing please? I'd rather not have his actions bar, scrolling with the pages thank you.
And the final thing is more of a question. Would it be possible to have a vertical menu bar while using this template mod, if so how would I go about that please? & Thank you
twds.proboards.com is where the back to top can be seen (not working) when you click back to bottom in Chrome.
Jan 24, 2014 14:52:55 GMT -5
I've ran into a few issues since adding this template mod, the first being the "back to top" plugin (back to bottom) doesn't work. I have requested help from the plugin creator about this but heard nothing back at all.
The second issue would be how do we turn off the fixed pagination thing please? I'd rather not have his actions bar, scrolling with the pages thank you.
And the final thing is more of a question. Would it be possible to have a vertical menu bar while using this template mod, if so how would I go about that please? & Thank you
twds.proboards.com is where the back to top can be seen (not working) when you click back to bottom in Chrome.
I'm using Chrome, and your back to top button does indeed work. I also installed it on my test forum with no issues: ellitest.proboards.com/ The problem is probably specific to you. Clear your cache, try it on another browser, or ask your members if they're experiencing the same. I can't duplicate the issue, so I don't think the problem is pertinent to the plugin or this template mod.
Next, the fixed pagination is default on ProBoards; this template mod simply bumps it down a few pixels so it doesn't disappear behind the menu bar. If you'd like the pagination to be static, you can add position: static !important to the CSS portion of this template mod. Like so:
As for your final question: yes, but since this isn't specific to the mod itself but rather the menu in general, create a new thread and I'll help you out. (Don't want to muddle this thread with non-relevant information.)
The second issue would be how do we turn off the fixed pagination thing please? I'd rather not have his actions bar, scrolling with the pages thank you.
And the final thing is more of a question. Would it be possible to have a vertical menu bar while using this template mod, if so how would I go about that please? & Thank you
twds.proboards.com is where the back to top can be seen (not working) when you click back to bottom in Chrome.
I'm using Chrome, and your back to top button does indeed work. I also installed it on my test forum with no issues: ellitest.proboards.com/ The problem is probably specific to you. Clear your cache, try it on another browser, or ask your members if they're experiencing the same. I can't duplicate the issue, so I don't think the problem is pertinent to the plugin or this template mod.
Next, the fixed pagination is default on ProBoards; this template mod simply bumps it down a few pixels so it doesn't disappear behind the menu bar. If you'd like the pagination to be static, you can add position: static !important to the CSS portion of this template mod. Like so:
.container>.control-bar {
top: 31px !important;
position: static !important;
}As for your final question: yes, but since this isn't specific to the mod itself but rather the menu in general, create a new thread and I'll help you out. (Don't want to muddle this thread with non-relevant information.)
Jan 25, 2014 8:17:40 GMT -5
Thanks for the help Eli, the back-top issue has indeed resolved itself. I thought it may of been a chrome update issue, but anyways. One less thing to worry about 
Thanks for the static info and I will be back to create that new thread later.
Thanks for the static info and I will be back to create that new thread later.
Mar 31, 2014 10:40:05 GMT -5
elli hey there, i'm running into an issue with this piece of coding for the first time ever its not scrolling with me, perhaps i misplaced something?
ouadrpg.proboards.com/ is where the code is being used.
It's scrolling for me, which browser are you using? (If you're still experiencing this issue.)
ouadrpg.proboards.com/ is where the code is being used.
It's scrolling for me, which browser are you using? (If you're still experiencing this issue.)
Apr 1, 2014 8:22:53 GMT -5
elli hey there, i'm running into an issue with this piece of coding for the first time ever its not scrolling with me, perhaps i misplaced something?
ouadrpg.proboards.com/ is where the code is being used.It's scrolling for me, which browser are you using? (If you're still experiencing this issue.)
Whoops, I forgot to come back here to let you know that all is well now. Sorry >.<
ouadrpg.proboards.com/ is where the code is being used.
Whoops, I forgot to come back here to let you know that all is well now. Sorry >.<
Apr 1, 2014 10:53:34 GMT -5
It's scrolling for me, which browser are you using? (If you're still experiencing this issue.)Whoops, I forgot to come back here to let you know that all is well now. Sorry >.<
No worries
No worries
