Post by Elli on Aug 16, 2019 10:10:21 GMT -7
Sticky Navigation
Preview
This effect is achieved with two simple techniques: first, a minor template mod moves the navigation above the forum wrapper; second, CSS overrides a handful of default styles to bring it all together. Without the CSS, your navigation won't stick, so don't leave it out!
- Go to Admin > Structure > Layout Templates > Forum Wrapper
- Assuming you're starting with the default ProBoards theme, find the following lines 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 HTML, then press ctrl + X (OSX: ⌘ + X) on your keyboard to cut
- Find the following lines, and create a new line above the opening {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 (OSX: ⌘ + V) on your keyboard to paste
- Remove <span class="tip"></span> from the navigation item's HTML
- Click Save Changes
- Now go to Themes > Advanced Styles & CSS > Stylesheet > "Style Sheet"
- Scroll to the bottom of your stylesheet and create a new line
- Paste the following on the new line you just created:
/* ==========================================================================
Sticky Navigation
========================================================================== */
/**
* 1. This number should be equal to the height of your navigation bar
*/
body {
padding-top: 31px; /* 1 */
}
/**
* 1. This number should be the preferred distance between your header and
* the navigation bar
*/
#wrapper {
margin-top: 20px; /* 1 */
}
#navigation-menu {
border-radius: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
top: 0;
z-index: 1005;
width: 100%;
}
/**
* 1. The amount of space between the text and bubble
*/
#navigation-menu div.tip-holder {
margin-left: 5px; /* 1 */
position: relative;
right: 0;
top: auto;
}
/**
* 1. This number should be equal to the height of your navigation bar
*/
.container > .control-bar {
top: 31px !important; /* 1 */
} - Click Save Changes