Admin Mod Bar Relocate

[Davey]

@Russ Have you any idea how to move the admin/mod bar from the very top of the page to the very bottom, say below the footer?
Thanks

 

[Russ]

You can make it stick to the bottom of the screen easily via CSS, place in extra.less:

.p-staffBar {
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
}

Otherwise you'll need to edit the template: PAGE_CONTAINER

Find:

<xf:if contentcheck="true">
    <div class="p-staffBar">
        <div class="p-staffBar-inner hScroller" data-xf-init="h-scroller">
            <div class="hScroller-scroll">
            <xf:contentcheck>
                <xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
                    <a href="{{ link('approval-queue') }}" class="p-staffBar-link badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
                        {{ phrase('approval_queue') }}
                    </a>
                </xf:if>

                <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
                    <a href="{{ link('reports') }}"
                        class="p-staffBar-link badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
                        data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
                        title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:') . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">
                        {{ phrase('reports') }}
                    </a>
                </xf:if>

                <xf:if contentcheck="true">
                    <a class="p-staffBar-link menuTrigger" data-xf-click="menu" data-xf-key="alt+m" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator') }}</a>
                    <div class="menu" data-menu="menu" aria-hidden="true">
                        <div class="menu-content">
                            <h4 class="menu-header">{{ phrase('moderator_tools') }}</h4>
                            <xf:contentcheck>
                            <!--[XF:mod_tools_menu:top]-->
                            <xf:if is="$xf.visitor.is_moderator">
                                <a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a>
                            </xf:if>
                            <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
                                <a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:') . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
                            </xf:if>
                            <!--[XF:mod_tools_menu:bottom]-->
                            </xf:contentcheck>
                        </div>
                    </div>
                </xf:if>

                <xf:if is="$xf.visitor.is_admin">
                    <a href="{{ base_url('admin.php') }}" class="p-staffBar-link" target="_blank">{{ phrase('admin') }}</a>
                </xf:if>
            </xf:contentcheck>
            </div>
        </div>
    </div>
</xf:if>

Move that entire code below:

</footer>

 

[Davey]

That floating version is absolutely amazing! Your an absolute diamond. Thankyou pal.

 

[Ashley.S.]

Sorry, thread hijack, how can I get it to stick to the top? Though I must agree, seeing it stuck at the bottom is just as amazing

 

[Russ]

Technically change:
bottom: 0;
to:

top: 0;

However this doesn't work if you have a floating navigation. I've been meaning to circle around to making the moderator bar sticky,

 

[Ashley.S.]

Technically change:
bottom: 0;
to:

top: 0;

However this doesn't work if you have a floating navigation. I've been meaning to circle around to making the moderator bar sticky,

Thanks. Sticky/Floating navigation is enabled. Mind you, since I keep scrolling down to access the ACP, having it at the bottom makes it a lot easier to access, haha!