Resource icon

XenForo Modern off canvas menu system 1

No permission to download
This completely new, different, modern and very much mobile friendly menu and navigation system has been running on my own site for nearly a year now and the 10,000+ users absolutely love it.

I am releasing it here in the interest that others may like to enhance it and post there enhancement here for the benefit of everyone however, any part of it, it's concept or its code can not be used in a commercial product without first obtaining my approval...I own the code and its concept.

The menu remains visible at all times no matter where you are on a page:
The main menu components are contained in a flyout section
The submenu items are visible for the area the user is in
The user can select if they want the menu bar on the left or right
A tablet user can use the menu without their hand leaving the side of the tablet
A mobile phone user can always access the menu as it remains across the top
...and more

BUT, to implement it is not for the faint hearted as it requires extensive template mods.

Implementation
The implementation is based on a stock Xenforo install and there are 4 components to its implementation:

Template edits - small changes to some templates, complete template changes and 1 new template to be created
Script file - there is one script file for the off canvas slide out menu that needs to be uploaded
Styles - there are some style files that need to be uploaded including font-awesome files
User Option - a new user option needs to be created to allow users to select where they want the menu bar, either left or right of the screen

1. Template Changes
(NOTE: all templates have my comments in them)
a) Header
Code:

Code:
<xen:edithint template="header.css" />

<xen:hook name="header">
<div id="header">
    <xen:include template="logo_block" />
    <xen:include template="navigation" />

<xen:comment> IB removed search and navigation for side menu </xen:comment>

</div>
</xen:hook>
b) Navigation
NOTE: This is the only template you will need to modify yourself. I have hard coded the main menu links in it so I can assign a different icon to each one and control their display order. I have left some examples of some other XF addon links in the template for you
Code:

Code:
<xen:comment> IB replaced entire template for slide menu system </xen:comment>

<xen:edithint template="navigation.css" />

<div class="menu_button" role="navigation">
    <a href="#" id="trigger"><span class="menu_label">Menu<br /></span><i class="fa fa-bars"></i></a>
</div>

<!-- SLIDE MENU -->
<div class="slidemenu closed">
    <header>
        <h2>Menu <a href="#" id="close"><img alt="Close" src="styles/slide_menu_close.png"></a></h2>
    </header>

    <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>

    <ul class="maintabs">
        <li><a href="{$homeLink}" class="navLink"><i class="fa fa-home"></i>{xen:phrase home}</a></li>

        <!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li><a href="{$tabs.forums.href}" class="navLink"><i class="fa fa-comments"></i>{$tabs.forums.title}</a></li>
        </xen:if>

        <xen:if is="{$tabs.members}">
            <li><a href="members" class="navLink"><i class="fa fa-user"></i>{$tabs.members.title}</a></li>
        </xen:if>

<xen:comment> IB example of other menu items for addons
        <li><a href="{xen:link showcase}" class="navLink"><i class="fa fa-plane"></i>{xen:phrase nflj_showcase}</a></li>
        <li><a href="{xen:link hotspots}" class="navLink"><i class="fa fa-arrows"></i>{xen:phrase waindigo_hotspots_hotspots}</a></li>
        <li><a href="{xen:link classifieds}" class="navLink"><i class="fa fa-tags"></i>{xen:phrase classifieds}</a></li>
        <li><a href="{xen:link events}" class="navLink"><i class="fa fa-bullhorn"></i>{xen:phrase events}</a></li>
        <li><a href="{xen:link groups}" class="navLink"><i class="fa fa-users"></i>{xen:phrase snog_socialgroups_groups}</a></li>
        <li><a href="{xen:link media}" class="navLink"><i class="fa fa-picture-o"></i>{xen:phrase xengallery_media}</a></li>
        <li><a href="http://www.clearprop.com.au/" target="_blank" class="navLink"><i class="fa fa-shopping-cart"></i>Pilot Shop</a></li>
        <li><a href="{xen:link resources}" class="navLink"><i class="fa fa-plus"></i>{xen:phrase resources}</a></li>
        <li><a href="{xen:link tutorials}" class="navLink" target="new"><i class="fa fa-graduation-cap"></i>Tutorials</a></li>
</xen:comment>

    </ul>

    <!-- MOBILE VIEW ONLY SUB MENUS -->
    <div class="mobile_sub_menu">
        <ul class="secondaryContent blockLinksList">
            <!-- account -->
            <xen:if is="{$tabs.account.selected}">
                <xen:hook name="navigation_tabs_account">
                    <li><a href="{xen:link account/personal-details}">Details</a></li>
                    <li><a href="{xen:link conversations}">Private Msg's</a></li>
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">My Feed</a></li></xen:if>
                    <li><a href="{xen:link account/likes}">Likes</a></li>
                </xen:hook>
            </xen:if>
            <!-- conversations -->
            <xen:if is="{$tabs.inbox.selected}">
                <li><a href="{xen:link conversations}">Private Msg's</a></li>
                <li><a href="{xen:link conversations/starred}">Starred Msg's</a></li>
                <li><a href="{xen:link conversations/yours}">Msg's I Started</a></li>
            </xen:if>
            <!-- extra tabs: home -->
            <xen:if is="{$extraTabs.home}">
                <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- forums -->
            <xen:if is="{$tabs.forums.selected}">
                <xen:hook name="navigation_tabs_forums">
                    <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">Mark Read</a></li></xen:if>
                    <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">Search</a></li></xen:if>
                    <xen:if is="{$visitor.user_id}">
                        <li><a href="{xen:link 'watched/forums'}">Tagged Forums</a></li>
                        <li><a href="{xen:link 'watched/threads'}">Tagged Threads</a></li>
                    </xen:if>
                    <li><a href="{xen:link 'find-new/posts', '', 'recent=21'}" rel="nofollow">New (21days)</a></li>
                </xen:hook>
            </xen:if>
            <!-- extra tabs: middle -->
            <xen:if is="{$extraTabs.middle}">
                <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- extra tabs: end -->
            <xen:if is="{$extraTabs.end}">
                <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- members -->
            <xen:if is="{$tabs.members.selected}">
                <xen:hook name="navigation_tabs_members">
                    <li><a href="{xen:link members}">Notable Users</a></li>
                    <xen:if is="{$xenOptions.enableMemberList}"><li><a href="{xen:link members/list}">Members</a></li></xen:if>
                    <li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
                    <xen:if is="{$canViewProfilePosts}"><li><a href="{xen:link find-new/profile-posts}">Profile Posts</a></li></xen:if>
                </xen:hook>
            </xen:if>
        </ul>
    </div>
</div>

<!-- MENU COLUMN -->
<div class="menu_column">
    <!-- user menu -->
    <xen:include template="navigation_visitor_tab" />

    <!-- PC VIEW ONLY SUB MENUS -->
    <div class="sub_menu_links">
        <ul class="secondaryContent blockLinksList">
            <!-- account -->
            <xen:if is="{$tabs.account.selected}">
                <xen:hook name="navigation_tabs_account">
                    <li><a href="{xen:link account/personal-details}">Details</a></li>
                    <li><a href="{xen:link conversations}">Private Msg's</a></li>
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">My Feed</a></li></xen:if>
                    <li><a href="{xen:link account/likes}">Likes</a></li>
                </xen:hook>
            </xen:if>
            <!-- conversations -->
            <xen:if is="{$tabs.inbox.selected}">
                <li><a href="{xen:link conversations}">Private Msg's</a></li>
                <li><a href="{xen:link conversations/starred}">Starred Msg's</a></li>
                <li><a href="{xen:link conversations/yours}">Msg's I Started</a></li>
            </xen:if>
            <!-- extra tabs: home -->
            <xen:if is="{$extraTabs.home}">
                <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- forums -->
            <xen:if is="{$tabs.forums.selected}">
                <xen:hook name="navigation_tabs_forums">
                    <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">Mark Read</a></li></xen:if>
                    <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">Search</a></li></xen:if>
                    <xen:if is="{$visitor.user_id}">
                        <li><a href="{xen:link 'watched/forums'}">{xen:phrase watched_forums}</a></li>
                        <li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>
                    </xen:if>
                    <li><a href="{xen:link 'find-new/posts', '', 'recent=21'}" rel="nofollow">New (21days)</a></li>
                </xen:hook>
            </xen:if>
            <!-- extra tabs: middle -->
            <xen:if is="{$extraTabs.middle}">
                <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- extra tabs: end -->
            <xen:if is="{$extraTabs.end}">
                <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
                    <xen:if is="{$extraTab.linksTemplate}">
                        <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                            {xen:raw $extraTab.linksTemplate}
                        </div>
                    </xen:if>
                </xen:foreach>
            </xen:if>
            <!-- members -->
            <xen:if is="{$tabs.members.selected}">
                <xen:hook name="navigation_tabs_members">
                    <li><a href="{xen:link members}">Notable Users</a></li>
                    <xen:if is="{$xenOptions.enableMemberList}"><li><a href="{xen:link members/list}">{xen:phrase registered_members}</a></li></xen:if>
                    <li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
                    <xen:if is="{$canViewProfilePosts}"><li><a href="{xen:link find-new/profile-posts}">{xen:phrase new_profile_posts}</a></li></xen:if>
                </xen:hook>
            </xen:if>
        </ul>
    </div>

</div>
c) Navigation.css
Code:

Code:
/* IB made multiple changes to template for slide menu system */

#col_right {margin-right:4.5rem; border-right: 1px solid @primaryLighter;}
#col_left {margin-left:4.5rem; border-left: 1px solid @primaryLighter;}
#loginBarHandle {display:none;}

.menu_label {padding-left:4px;}
#col_right .menu_button {position:fixed; top:3px; right:14px; z-index:200;}
#col_left .menu_button {position:fixed; top:3px; left:14px; z-index:200;}
.menu_button a i {font-size:3.1rem; line-height:3.1rem;}

.slidemenu {
    position: fixed;
    z-index: 1000;
    height: 100%;
    width: 300px;
    background: @contentBackground;}

#col_right .slidemenu {
    right: 0;
    top: 0;
    -webkit-transition: right 0.3s ease, -webkit-box-shadow 0.3s ease 0.2s;
    transition: right 0.3s ease, box-shadow 0.3s ease 0.2s;
    -webkit-box-shadow: -6px 0px 6px 0px @primaryDarker;
    -moz-box-shadow: -6px 0px 6px 0px @primaryDarker;
    box-shadow: -6px 0px 6px 0px @primaryDarker;}

#col_left .slidemenu {
    left: 0;
    top: 0;
    -webkit-transition: left 0.3s ease, -webkit-box-shadow 0.3s ease 0.2s;
    transition: left 0.3s ease, box-shadow 0.3s ease 0.2s;
    -webkit-box-shadow: 6px 0px 6px 0px @primaryDarker;
    -moz-box-shadow: 6px 0px 6px 0px @primaryDarker;
    box-shadow: 6px 0px 6px 0px @primaryDarker;}

#col_right .slidemenu.closed {
    right: -300px;
    -webkit-box-shadow: 0 0 0 @primaryLighter;
    -moz-box-shadow: 0 0 0 @primaryLighter;
    box-shadow: 0 0 0 @primaryLighter;}

#col_left .slidemenu.closed {
    left: -300px;
    -webkit-box-shadow: 0 0 0 @primaryLighter;
    -moz-box-shadow: 0 0 0 @primaryLighter;
    box-shadow: 0 0 0 @primaryLighter;}

.slidemenu #close {float:right; margin-right:6px;}

.slidemenu h2 {
    padding-left: .5em;
    color: @primaryDarker;
    margin: 10px 0px;
    font-size: 18pt;
    text-align: left;}

.slidemenu ul {padding:0; margin:0;}

.slidemenu .maintabs {margin-top:0.4em; margin-left:0.2em;}

.slidemenu .maintabs li {
    color:@primaryDarker;
    width:23%;
    height:75px;
    overflow:hidden;
    display:block;
    float:left;
    margin-right:5px;
    text-align:center; }

.slidemenu .maintabs li a {
    color:@primaryDarker;
    font-size:12px;
    overflow:hidden;
    display:block;
    padding:0;
    text-align:center;}

.slidemenu .maintabs li a i {
    font-size:45px;
    overflow:hidden;
    display:block;
    line-height:45px;
    padding:0;
    text-align:center;}

.slidemenu .maintabs li a:hover {
    background: @primaryLighterStill;
    border-color: @primaryLighterStill;
    text-decoration:none;}

.menu_column {
    position: fixed;
    overflow: hidden;
    text-align: center;
    width: 4.5rem;
    z-index: 100;
    height: 100%;
    margin-top:75px;
    background: @contentBackground;}

#col_right .menu_column {top:0;    right:0;}
#col_left .menu_column {top:0; left:0;}
.visitorTabs {width:100%;}
.visitorTabs li {padding:10px 0px;}
.visitorTabs li a, .visitorTabs li {width:100%; display:block;}
.visitorTabs li a i {font-size:22px;}

.navTab .accountPopup img {
    border: 1px solid @primaryDarker;
    border-radius: 5px;
    height: 30x;
    width: 30px;}

#AccountMenu, #AlertsMenu, #ConversationsMenu {z-index:100;}

/*-------------------------*/
/* Account Popup Menu */
#AccountMenu
{
    width: 274px;
}

#AccountMenu .menuHeader
{
    position: relative;
}

    #AccountMenu .menuHeader .avatar
    {
        float: left;
        margin-right: 10px;
    }

    #AccountMenu .menuHeader .visibilityForm
    {
        margin-top: 10px;
        color: @primaryMedium;
    }

    #AccountMenu .menuHeader .links .fl
    {
        position: absolute;
        bottom: 10px;
        left: {xen:calc '10 + 10 + 96'}px;
    }

    #AccountMenu .menuHeader .links .fr
    {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

#AccountMenu .menuColumns
{
    overflow: hidden; zoom: 1;
    padding: 2px;
}

    #AccountMenu .menuColumns ul
    {
        float: left;
        padding: 0;
        max-height: none;
        overflow: hidden;
    }

        #AccountMenu .menuColumns a,
        #AccountMenu .menuColumns label
        {
            width: 115px;
        }

#AccountMenu .statusPoster textarea
{
    width: 245px;
    margin: 0;
    resize: vertical;
    overflow: hidden;
}

#AccountMenu .statusPoster .submitUnit
{
    margin-top: 5px;
    text-align: right;
}

    #AccountMenu .statusPoster .submitUnit .statusEditorCounter
    {
        float: left;
        line-height: 23px;
        height: 23px;
    }

/* ---------------------------------------- */
/* Inbox, Alerts Popups */

.navPopup
{
    width: 260px;
}

.navPopup a:hover,
.navPopup .listItemText a:hover
{
    background: none;
    text-decoration: underline;
}

    .navPopup .menuHeader .InProgress
    {
        float: right;
        display: block;
        width: 20px;
        height: 20px;
    }

.navPopup .listPlaceholder
{
    max-height: 350px;
    overflow: auto;
}

    .navPopup .listPlaceholder ol.secondaryContent
    {
        padding: 0 10px;
    }

        .navPopup .listPlaceholder ol.secondaryContent.Unread
        {
            background-color: @inlineModChecked.background-color;
        }

.navPopup .listItem
{
    overflow: hidden; zoom: 1;
    padding: 5px 0;
    border-bottom: 1px solid @primaryLighterStill;
}

.navPopup .listItem:last-child
{
    border-bottom: none;
}

.navPopup .PopupItemLinkActive:hover
{
    margin: 0 -8px;
    padding: 5px 8px;
    border-radius: 5px;
    background-color: @primaryLighterStill;
    cursor: pointer;
}

.navPopup .avatar
{
    float: left;
}

    .navPopup .avatar img
    {
        width: 32px;
        height: 32px;
    }

.navPopup .listItemText
{
    margin-left: 37px;
}

    .navPopup .listItemText .muted
    {
        font-size: 9px;
    }

    .navPopup .unread .listItemText .title,
    .navPopup .listItemText .subject
    {
        font-weight: bold;
    }

.navPopup .sectionFooter .floatLink
{
    float: right;
}

.itemCount {
    font-weight: bold;
    font-size: 9px;
    color: white;
    background-color: #e03030;
    padding: 0 2px;
    border-radius: 2px;
    position: absolute;
    top: 0px;
    right: 10px;
    line-height: 16px;
    min-width: 12px;
    _width: 12px;
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    word-wrap: normal;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
    height: 16px;}

.itemCount.Zero {display: none;}

.ac_left {left: 72px !important; top: 75px !important;}
.ac_right {right: 72px !important; top: 75px !important; left:auto !important;}
.con_left {left:72px !important; top:130px !important;}
.con_right {right:72px !important; top:130px !important; left:auto !important;}
.alert_left {left: 72px !important; top: 172px !important;}
.alert_right {right: 72px !important; top: 172px !important; left:auto !important;}

.whats_new {font-size:16px; font-weight:bold;}

/*----------------------*/
/* Reg, Login Button */
.reg_button {
    background-color: white;
    padding: 3px;
    border: 1px solid @secondaryLight;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
    display: block;
    cursor: pointer;}

.reg_button .inner {
    font-weight: bold;
    font-size: 12pt;
    font-family: @button.font-family;
    color: @textCtrlBackground;
    background: @secondaryMedium url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x center -7px;
    border-radius: 4px;
    display: block;}

.reg_button:hover .inner {
    text-decoration: none;
    background-color: @primaryDarker;}

.reg_button:active {
    box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    position: relative;
    top: 2px;}

.sub_menu_links .secondaryContent {background-color: @contentBackground; border-bottom-style: none;}
.sub_menu_links .blockLinksList a {padding: 8px 1px;}

.footer_links {position:fixed; bottom:0px; width:4.5rem;}

<xen:if is="@enableResponsive">
    @media (max-height:580px), (max-width:580px){
        #col_right, #col_left {margin:32px 0 0 0; border:none;}
               #AccountMenu{overflow-y:scroll; max-height:90%;}
          
        .menu_label, .sub_menu_links {display:none}
        .menu_button a i {font-size:32px; line-height:32px; margin-top:-3px; color:@textCtrlBackground;}

        .slidemenu {width:100%; height:100%; background:#fff; overflow-y:scroll; overflow-x:hidden; z-index:1000; position:fixed; top:0; right:0;}
        #col_right .slidemenu.closed {right:-100%;}
        #col_left .slidemenu.closed {left:-100%;}

        .menu_column {width:100%; height:32px; margin-top:0px; display:block; background-color: @primaryLightish;}
        #col_right .menu_column {text-align:left;}
        #col_left .menu_column {text-align:left; padding-left:3rem;}

        .navTab .accountPopup img {margin:0px 10px;}
        .visitorTabs {position:fixed; top:0px; width:100%; height:32px; text-align:justify; margin:0 auto;}
        .visitorTabs li {width:14%; height:32px; overflow:hidden; display:inline-block; float:left; text-align:center; padding:0px;}
        .visitorTabs li a {height:32px; overflow:hidden; line-height:32px; display:block;}
        .visitorTabs li a i {color:#fff; font-size:24px; line-height:32px;}
        .visitorTabs li a i:hover {color:@primaryMedium;}

        .itemCount {position:relative;top:-10px; padding:3px 5px;}

        .whats_new {color:@textCtrlBackground; border:1px solid @textCtrlBackground;}

        .footer_links {position:static; width:100%;}

        .reg_button {width:130px; padding: 0px; float:right; margin-right:50px;}
        .reg_button .inner {font-size: 9pt;}

        .mobile_sub_menu {display:inline-block; width:100%; text-align:center;}
        .mobile_sub_menu ul li {
            background:@primaryDarker;
            width:30%;
            height:30px;
            border-radius:8px;
            overflow:hidden;
            display:block;
            float:left;
            margin:5px 3px 0px;
            text-align:center;
            vertical-align:middle;
            line-height:30px; }
        .mobile_sub_menu ul li a {
            color:#fff;
            text-decoration:none;
            font-size:11px;
            overflow:hidden;
            width:100%;
            height:30px;
            display:block;
            padding:0;
            text-align:center;}
        .mobile_sub_menu ul li a:hover{text-decoration:none; background:@primaryLighterStill;}

        .ac_left, .con_left, .alert_left, .ac_right, .alert_right, .con_right {left: 10px !important; top: 32px !important;}
    }

    @media (min-height:740px), (min-width:740px){
        .mobile_sub_menu{display:none;}}
</xen:if>
d) navigation_admin
NOTE: This is a new template that you will need to create...note the name of the template must be navigation_admin
Code:

Code:
<xen:comment> IB new template for admin component of slide menu </xen:comment>

<li class="navTab admin Popup PopupControl PopupClosed">
   <a href="admin.php" class="navLink NoPopupGadget" rel="Menu" target="_blank"><i class="fa fa-cogs"></i>
     <xen:if is="{$visitor.is_moderator} AND {$session.moderationCounts.total} OR {$visitor.is_moderator} && !{$xenOptions.reportIntoForumId} && {$session.reportCounts.total} !=0 OR {$visitor.is_admin} AND {$session.canAdminUsers} AND {$session.userModerationCounts.total}">
       <xen:set var="$totalCounts">{xen:calc '{$session.userModerationCounts.total} + {$session.reportCounts.total} + {$session.moderationCounts.total}'}</xen:set>
       <span class="itemCount {xen:if {$totalCounts}, 'alert'}">{$totalCounts}</span></a>
     </xen:if>
   </a>

   <div class="Menu" style="z-index:100;">
     <div class="menuHeader primaryContent">
       <xen:if is="{$visitor.is_admin}">
         <h3>
           <span class="Progress InProgress"></span>
           <a href="admin.php" class="concealed" target="_blank"><span class="itemLabel">{xen:phrase admin_control_panel}</span></a>
         </h3>
       <xen:else />
         <h3>{xen:phrase admin_control_panel}</h3>
       </xen:if>
     </div>

     <div id="AccountMenu">
       <div class="menuColumns secondaryContent">
         <ul class="col1 blockLinksList">
           <xen:if is="{$visitor.is_moderator} && !{$xenOptions.reportIntoForumId}">
             <li>
               <a href="{xen:link reports}" class="reportedItems modLink">
                 <span class="itemLabel">{xen:phrase reported_items_short}<xen:if is="{$session.reportCounts.total} !=0">:</xen:if></span>
                 <xen:if is="{$session.reportCounts.total} !=0">
                   <span class="itemCount {xen:if '({$session.reportCounts.total} AND {$session.reportCounts.lastUpdate} > {$session.reportLastRead}) OR {$session.reportCounts.assigned}', 'alert'}" title="{xen:if $session.reportCounts.lastUpdate, '{xen:phrase last_report_update}: {xen:datetime $session.reportCounts.lastUpdate}'}"><xen:if is="{$session.reportCounts.assigned}">{$session.reportCounts.assigned} / {$session.reportCounts.total}<xen:else />{$session.reportCounts.total}</xen:if></span>
                 </xen:if>
               </a>
             </li>
           </xen:if>
           <xen:if is="{$visitor.is_admin} AND {$session.canAdminUsers} AND {$session.userModerationCounts.total}">
             <li>
               <a href="admin.php?users/moderated" class="userModerationQueue modLink">
                 <span class="itemLabel">{xen:phrase users_awaiting_approval_short}:</span>
                 <span class="itemCount {xen:if {$session.userModerationCounts.total}, 'alert'}">{$session.userModerationCounts.total}</span>
               </a>
             </li>
           </xen:if>
         </ul>
         <ul class="col2 blockLinksList">
           <xen:if is="{$visitor.is_moderator} AND {$session.moderationCounts.total}">
             <li>
               <a href="{xen:link moderation-queue}" class="moderationQueue modLink">
                 <span class="itemLabel">{xen:phrase moderation_queue_short}:</span>
                 <span class="itemCount {xen:if {$session.moderationCounts.total}, 'alert'}">{$session.moderationCounts.total}</span>
               </a>
             </li>
           </xen:if>
           <xen:if is="{$visitor.is_admin}">
             <xen:if is="{$session.permissionTest}">
               <li>
                 <a href="{xen:link misc/reset-permissions}" class="permissionTest adminLink OverlayTrigger">
                   <span class="itemLabel">{xen:phrase permissions_from_x, 'name={$session.permissionTest.username}'}</span>
                 </a>
               </li>
             </xen:if>
           </xen:if>
         </ul>
       </div>
       <div class="menuColumns secondaryContent">
         <ul class="col1 blockLinksList">
           <xen:if is="{$visitor.is_admin}">
             <li>
               <a href="admin.php?users" target="_blank"><span class="itemLabel">{xen:phrase users}</span></a>
             </li>
             <li>
               <a href="admin.php?options" target="_blank"><span class="itemLabel">{xen:phrase admin_navigation_optionsLink}</span></a>
             </li>
             <li>
               <a href="admin.php?stats/daily" target="_blank"><span class="itemLabel">{xen:phrase daily_statistics}</span></a>
             </li>
           </xen:if>
         </ul>
         <ul class="col2 blockLinksList">
           <xen:if is="{$visitor.is_admin}">
             <li>
               <a href="admin.php?threads/reply-bans" target="_blank"><span class="itemLabel">{xen:phrase thread_reply_bans}</span></a>
             </li>
             <li>
               <a href="admin.php?style-properties" target="_blank"><span class="itemLabel">{xen:phrase style_properties}</span></a>
             </li>
             <li>
               <a href="admin.php?stats/monthly" target="_blank"><span class="itemLabel">{xen:phrase monthly_statistics}</span></a>
             </li>
           </xen:if>
         </ul>
       </div>
     </div>
   </div>
</li>
e) navigation_visitor_tab
Code:

Code:
<xen:edithint template="navigation.css" />

<ul class="visitorTabs">

   <xen:if is="{$visitor.user_id}">
     <xen:hook name="navigation_visitor_tabs_start" />
     <!-- account -->
     <li class="navTab account Popup PopupControl PopupClosed {xen:if $tabs.account.selected, 'selected'}">

       <xen:set var="$visitorHiddenUnread" value="{xen:calc '{$visitor.alerts_unread} + {$visitor.conversations_unread}'}" />
       <a href="{xen:link account}" class="navLink accountPopup NoPopupGadget" rel="Menu"><span><img src="{xen:helper avatar, $visitor, s}" alt="" /></span></a>

       <div class="Menu JsOnly {xen:if '{$visitor.customFields.menu}', 'ac_right', 'ac_left'}" id="AccountMenu">
         <div class="primaryContent menuHeader">
           <xen:avatar user="$visitor" size="m" class="NoOverlay plainImage" title="{xen:phrase view_your_profile}" />
        
           <h3><a href="{xen:link members, $visitor}" class="concealed" title="{xen:phrase view_your_profile}">{$visitor.username}</a></h3>
        
           <xen:if hascontent="true"><div class="muted"><xen:contentcheck>{xen:helper usertitle, $visitor}</xen:contentcheck></div></xen:if>
        
           <ul class="links">
             <li class="fl"><a href="{xen:link members, $visitor}">{xen:phrase your_profile_page}</a></li>
           </ul>
         </div>

         <!-- admin and moderator links -->
         <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
           <div class="menuColumns secondaryContent">
             <ul class="col1 blockLinksList">
               <xen:if is="{$visitor.is_moderator} && !{$xenOptions.reportIntoForumId}">
                 <li>
                   <a href="{xen:link reports}" class="reportedItems modLink">
                     <span class="itemLabel">{xen:phrase reported_items_short}<xen:if is="{$session.reportCounts.total} !=0">:</xen:if></span>
                     <xen:if is="{$session.reportCounts.total} !=0">
                       <span class="itemCount {xen:if '({$session.reportCounts.total} AND {$session.reportCounts.lastUpdate} > {$session.reportLastRead}) OR {$session.reportCounts.assigned}', 'alert'}" title="{xen:if $session.reportCounts.lastUpdate, '{xen:phrase last_report_update}: {xen:datetime $session.reportCounts.lastUpdate}'}"><xen:if is="{$session.reportCounts.assigned}">{$session.reportCounts.assigned} / {$session.reportCounts.total}<xen:else />{$session.reportCounts.total}</xen:if></span>
                     </xen:if>
                   </a>
                 </li>
               </xen:if>
             </ul>
             <ul class="col2 blockLinksList">
               <xen:if is="{$visitor.is_moderator} AND {$session.moderationCounts.total}">
                 <li>
                   <a href="{xen:link moderation-queue}" class="moderationQueue modLink">
                     <span class="itemLabel">{xen:phrase moderation_queue_short}:</span>
                     <span class="itemCount {xen:if {$session.moderationCounts.total}, 'alert'}">{$session.moderationCounts.total}</span>
                   </a>
                 </li>
               </xen:if>
               <xen:if is="{$visitor.is_admin} AND {$session.canAdminUsers} AND {$session.userModerationCounts.total}">
                 <li>
                   <a href="admin.php?users/moderated" class="userModerationQueue modLink">
                     <span class="itemLabel">{xen:phrase users_awaiting_approval_short}:</span>
                     <span class="itemCount {xen:if {$session.userModerationCounts.total}, 'alert'}">{$session.userModerationCounts.total}</span>
                   </a>
                 </li>
               </xen:if>
             </ul>
           </div>
         </xen:if>

         <div class="menuColumns secondaryContent">
           <ul class="col1 blockLinksList">
           <xen:hook name="navigation_visitor_tab_links1">
             <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li></xen:if>
             <xen:if is="{$canEditSignature}"><li><a href="{xen:link account/signature}">{xen:phrase signature}</a></li></xen:if>
             <li><a href="{xen:link account/contact-details}">{xen:phrase contact_details}</a></li>
             <li><a href="{xen:link account/privacy}">{xen:phrase privacy}</a></li>
             <li><a href="{xen:link account/preferences}" class="OverlayTrigger">{xen:phrase preferences}</a></li>
             <li><a href="{xen:link account/alert-preferences}">{xen:phrase alert_preferences}</a></li>
             <xen:if is="{$canUploadAvatar}"><li><a href="{xen:link account/avatar}" class="OverlayTrigger" data-cacheOverlay="true">{xen:phrase avatar}</a></li></xen:if>
             <xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.twitterAppKey} OR {$xenOptions.googleClientId}"><li><a href="{xen:link account/external-accounts}">{xen:phrase external_accounts}</a></li></xen:if>
             <li><a href="{xen:link account/security}">{xen:phrase password}</a></li>
           </xen:hook>
           </ul>
           <ul class="col2 blockLinksList">
           <xen:hook name="navigation_visitor_tab_links2">
             <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li></xen:if>
             <li><a href="{xen:link conversations}">{xen:phrase conversations}
               <strong class="itemCount {xen:if $visitor.conversations_unread, '', 'Zero'}"
                 id="VisitorExtraMenu_ConversationsCounter">
                 <span class="Total">{xen:number $visitor.conversations_unread}</span>
               </strong></a></li>
             <li><a href="{xen:link account/alerts}">{xen:phrase alerts}
               <strong class="itemCount {xen:if $visitor.alerts_unread, '', 'Zero'}"
                 id="VisitorExtraMenu_AlertsCounter">
                 <span class="Total">{xen:number $visitor.alerts_unread}</span>
               </strong></a></li>
             <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li>
             <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}'}">{xen:phrase your_content}</a></li>
             <li><a href="{xen:link account/following}">{xen:phrase people_you_follow}</a></li>
             <li><a href="{xen:link account/ignored}">{xen:phrase people_you_ignore}</a></li>
             <xen:if is="{$xenCache.userUpgradeCount}"><li><a href="{xen:link account/upgrades}">{xen:phrase account_upgrades}</a></li></xen:if>
             <li><a href="{xen:link account/two-step}">{xen:phrase two_step_verification}</a></li>
           </xen:hook>
           </ul>
         </div>
         <div class="menuColumns secondaryContent">
           <ul class="col1 blockLinksList">
             <li>       
               <form action="{xen:link account/toggle-visibility}" method="post" class="AutoValidator visibilityForm">
                 <label><input type="checkbox" name="visible" value="1" class="SubmitOnChange" {xen:checked $visitor.visible} />
                   {xen:phrase show_online_status}</label>
                 <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
               </form>
             </li>
           </ul>
           <ul class="col2 blockLinksList">
             <li><a href="{xen:link logout, '', '_xfToken={$visitor.csrf_token_page}'}" class="LogOut">{xen:phrase log_out}</a></li>
           </ul>
         </div>
         <xen:if is="{$canUpdateStatus}">
           <form action="{xen:link members/post, $visitor}" method="post" class="sectionFooter statusPoster AutoValidator" data-optInOut="OptIn">
             <textarea name="message" class="textCtrl StatusEditor UserTagger Elastic" placeholder="{xen:phrase update_your_status}..." rows="1" cols="40" style="height:18px" data-statusEditorCounter="#visMenuSEdCount" data-nofocus="true"></textarea>
             <div class="submitUnit">
               <span id="visMenuSEdCount" title="{xen:phrase characters_remaining}"></span>
               <input type="submit" class="button primary MenuCloser" value="{xen:phrase post_verb}" />
               <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
               <input type="hidden" name="return" value="1" />
             </div>
           </form>
         </xen:if>
       </div>   
     </li>

     <!-- conversations popup -->
     <li class="navTab inbox Popup PopupControl PopupClosed">

       <a href="{xen:link conversations}" rel="Menu" class="navLink NoPopupGadget"><i class="fa fa-envelope"></i>
         <strong class="itemCount {xen:if {$visitor.conversations_unread}, '', 'Zero'}"
           id="ConversationsMenu_Counter" data-text="{xen:phrase you_have_x_new_unread_conversations}">
           <span class="Total">{xen:number $visitor.conversations_unread}</span>
         </strong>
       </a>

       <div class="Menu JsOnly navPopup {xen:if '{$visitor.customFields.menu}', 'con_right', 'con_left'}" id="ConversationsMenu"
         data-contentSrc="{xen:link 'conversations/popup'}"
         data-contentDest="#ConversationsMenu .listPlaceholder">

         <div class="menuHeader primaryContent">
           <h3>
             <span class="Progress InProgress"></span>
             <a href="{xen:link conversations}" class="concealed">{xen:phrase conversations}</a>
           </h3>           
         </div>

         <div class="listPlaceholder"></div>

         <div class="sectionFooter">
           <xen:if is="{$canStartConversation}"><a href="{xen:link conversations/add}" class="floatLink">{xen:phrase start_new_conversation}</a></xen:if>
           <a href="{xen:link conversations}">{xen:phrase show_all}...</a>
         </div>
       </div>
     </li>

     <xen:hook name="navigation_visitor_tabs_middle" />

     <!-- alerts popup -->
     <li class="navTab alerts Popup PopupControl PopupClosed">

       <a href="{xen:link account/alerts}" rel="Menu" class="navLink NoPopupGadget"><i class="fa fa-flag"></i>
         <strong class="itemCount {xen:if {$visitor.alerts_unread}, '', 'Zero'}"
           id="AlertsMenu_Counter" data-text="{xen:phrase you_have_x_new_alerts}">
           <span class="Total">{xen:number $visitor.alerts_unread}</span>
         </strong>
       </a>

       <div class="Menu JsOnly navPopup {xen:if '{$visitor.customFields.menu}', 'alert_right', 'alert_left'}" id="AlertsMenu"
         data-contentSrc="{xen:link 'account/alerts-popup'}"
         data-contentDest="#AlertsMenu .listPlaceholder"
         data-removeCounter="#AlertsMenu_Counter">

         <div class="menuHeader primaryContent">
           <h3>
             <span class="Progress InProgress"></span>
             <a href="{xen:link account/alerts}" class="concealed">{xen:phrase alerts}</a>
           </h3>
         </div>

         <div class="listPlaceholder"></div>

         <div class="sectionFooter">
           <a href="{xen:link account/alert-preferences}" class="floatLink">{xen:phrase alert_preferences}</a>
           <a href="{xen:link account/alerts}">{xen:phrase show_all}...</a>
         </div>
       </div>
     </li>

     <xen:hook name="navigation_visitor_tabs_end" />

   <xen:else />
     <div>
       <label for="LoginControl" class="reg_button">
         <a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, "Log in or Join now for more", {xen:phrase log_in}}</a>
       </label>
     </div>
   </xen:if>

   <li><a href="{xen:link find-new/posts}" class="Tooltip" data-offsetY="-6" data-offsetX="0" title="What's New"><span class="whats_new">New</span></a></li>

   <!-- FOOTER LINKS -->
   <div class="footer_links">
       <li><a href="{$requestPaths.requestUri}#top"><i class="fa fa-chevron-circle-up"></i></a></li>
       <!-- admin link -->
       <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}"><xen:include template="navigation_admin" /></xen:if>

   </div>
</ul>
f) PAGE_CONTAINER
NOTE: The change in here is to add the font-awesome icons. If you already have them then you should know what to do
Code:

Code:
<!DOCTYPE html><xen:set var="$isResponsive" value="{xen:if '@enableResponsive AND !{$noResponsive}', 1, 0}" />
<html id="XenForo" lang="{$visitorLanguage.language_code}" dir="{$visitorLanguage.text_direction}" class="Public NoJs {xen:if {$visitor.user_id}, 'LoggedIn', 'LoggedOut'} {xen:if {$sidebar}, 'Sidebar', 'NoSidebar'} {xen:if $hasAutoDeferred, RunDeferred} {xen:if $isResponsive, Responsive, NoResponsive}" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<xen:hook name="page_container_head">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <xen:if is="{$isResponsive}">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </xen:if>
    <xen:if is="{$requestPaths.fullBasePath}">
        <base href="{$requestPaths.fullBasePath}" />
        <script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>
            var _b = document.getElementsByTagName('base')[0], _bH = "{xen:jsescape $requestPaths.fullBasePath}";
            if (_b && _b.href != _bH) _b.href = _bH;
        </script>
    </xen:if>

    <title><xen:if is="{$title}">{xen:raw $title} | {$xenOptions.boardTitle}<xen:else />{$xenOptions.boardTitle}</xen:if></title>

    <noscript><style>.JsOnly, .jsOnly { display: none !important; }</style></noscript>
    <link rel="stylesheet" href="css.php?css=xenforo,form,public&amp;style={xen:urlencode $_styleId}&amp;dir={$visitorLanguage.text_direction}&amp;d={$visitorStyle.last_modified_date}" />
    <!--XenForo_Require:CSS-->
    {xen:helper ignoredCss, {$visitor.ignoredUsers}}

    <xen:include template="google_analytics" />
    <xen:include template="page_container_js_head" />

    <link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />
    <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}" href="{xen:link forums/-/index.rss}" />
    <xen:if is="{$pageDescription.content} AND !{$pageDescription.skipmeta} AND !{$head.description}"><meta name="description" content="{xen:string wordTrim, {xen:helper stripHtml, {xen:raw $pageDescription.content}}, 200}" /></xen:if>
    <xen:if is="{$head}"><xen:foreach loop="$head" value="$headElement">{xen:raw $headElement}</xen:foreach></xen:if>
</xen:hook>

<xen:comment> IB added for navbar icons </xen:comment>
<link href="styles/font-awesome/css/font-awesome.min.css" rel="stylesheet">

</head>

<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>

<xen:comment> IB added id for menu column </xen:comment>
<div {xen:if {$visitor.customFields.menu}, 'id="col_right"', 'id="col_left"'}>

<xen:hook name="body">

<xen:comment> IB removed mod bar </xen:comment>
<xen:if is="!{$visitor.user_id} && !{$hideLoginBar}">
    <xen:include template="login_bar" />
</xen:if>

<div id="headerMover">
    <div id="headerProxy"></div>

<div id="content" class="{$contentTemplate}">
    <div class="pageWidth">
        <div class="pageContent">
            <!-- main content area -->
      
            <xen:hook name="page_container_content_top" />
      
            <xen:if is="{$sidebar}">
                <div class="mainContainer">
                    <div class="mainContent"></xen:if>
                  
                        <xen:include template="ad_above_top_breadcrumb" />
                  
                        <xen:hook name="page_container_breadcrumb_top">
                        <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                            <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                            <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                        </div>
                        </xen:hook>
                  
                        <xen:include template="ad_below_top_breadcrumb" />
              
                        <!--[if lt IE 8]>
                            <p class="importantMessage">{xen:phrase you_are_using_out_of_date_browser_upgrade}</p>
                        <![endif]-->

                        <xen:hook name="page_container_notices">
                        <xen:include template="notices" />                   
                        </xen:hook>
                  
                        <xen:hook name="page_container_content_title_bar">
                        <xen:if is="!{$noH1}">                   
                            <!-- h1 title, description -->
                            <div class="titleBar">
                                {xen:raw $beforeH1}
                                <h1><xen:if
                                    is="{$h1}">{xen:raw $h1}<xen:elseif
                                    is="{$title}" />{xen:raw $title}<xen:else
                                    />{$xenOptions.boardTitle}</xen:if></h1>
                          
                                <xen:if is="{$pageDescription.content}"><p id="pageDescription" class="muted {$pageDescription.class}">{xen:raw $pageDescription.content}</p></xen:if>
                            </div>
                        </xen:if>
                        </xen:hook>
                  
                        <xen:include template="ad_above_content" />
                  
                        <!-- main template -->
                        {xen:raw $contents}
                  
                        <xen:include template="ad_below_content" />
                  
                        <xen:if is="!{$visitor.user_id} && !{$hideLoginBar}">
                            <!-- login form, to be moved to the upper drop-down -->
                            <xen:include template="login_bar_form" />
                        </xen:if>
                  
                    <xen:if is="{$sidebar}"></div>
                </div>
          
                <!-- sidebar -->
                <aside>
                    <div class="sidebar">
                        <xen:hook name="page_container_sidebar">
                        <xen:include template="ad_sidebar_top" />
                        <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if>
                        {xen:raw $sidebar}
                        <xen:include template="ad_sidebar_bottom" />
                        </xen:hook>
                    </div>
                </aside>
            </xen:if>
      
            <xen:hook name="page_container_breadcrumb_bottom">       
            <div class="breadBoxBottom"><xen:include template="breadcrumb" /></div>
            </xen:hook>
                  
            <xen:include template="ad_below_bottom_breadcrumb" />
                  
        </div>
    </div>
</div>

<header>
    <xen:include template="header" />
    <xen:edithint template="navigation" />
    <xen:edithint template="search_bar" />
</header>

</div>

<footer>
    <xen:include template="footer" />
</footer>

<xen:include template="page_container_js_body" />

<xen:if is="{$isIndexPage} AND {$canSearch}">
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "{xen:jsescape {xen:link canonical:index}}",
    "potentialAction": {
        "@type": "SearchAction",
        "target": "{xen:jsescape {xen:link canonical:search/search}}{xen:if $xenOptions.useFriendlyUrls, '?', '&'}keywords={search_keywords}",
        "query-input": "required name=search_keywords"
    }
}
</script>
</xen:if>

</xen:hook>

</div>

</body>
</html>
g) page_container_js_body
NOTE: Just add this to the very bottom of the template
Code:

Code:
<xen:comment> IB added for slide menu </xen:comment>
<script src="js/slide_menu.js"></script>
h) public.css
NOTE: Just change this block in the template
Code:

Code:
    #headerMover #headerProxy
    {
        @property "header.background";
        background-color: @primaryMedium;
        @property "/header.background";
    background: rgb(23, 96, 147) url('styles/logoright.png') no-repeat top 10px right 10px;
    background: rgb(23, 96, 147) url('styles/logoright.png') no-repeat top 10px right 10px;
        height: {xen:calc '@headerLogoHeight + @headerTabHeight * 2 + 2'}px; /* +2 borders */

/* IB added for slide menu */
        height: @headerLogoHeight;
    }
i) search_bar
Code:

Code:
<xen:comment> IB changed entire template for slide menu </xen:comment>

<xen:edithint template="search_bar.css" />

<div id="searchBar">
    <xen:hook name="quick_search">

    <fieldset id="QuickSearch">
        <form action="{xen:link 'search/search'}" method="post" class="formPopup">
      
            <div class="primaryControls">
                <!-- block: primaryControls -->
                <input type="search" name="keywords" value="" class="textCtrl" placeholder="{xen:phrase search}..." title="{xen:phrase enter_your_search_and_hit_enter}" id="QuickSearchQuery" />
                <!-- end block: primaryControls -->
            </div>
      
            <div class="secondaryControls">
                <div class="controlsWrapper">
          
                    <!-- block: secondaryControls -->
                    <dl class="ctrlUnit">
                        <dt></dt>
                        <dd><ul>
                            <li><label><input type="checkbox" name="title_only" value="1"
                                id="search_bar_title_only" class="AutoChecker"
                                data-uncheck="#search_bar_thread" /> {xen:phrase search_titles_only}</label></li>
                        </ul></dd>
                    </dl>
          
                    <dl class="ctrlUnit">
                        <dt><label for="searchBar_users">{xen:phrase posted_by_member}:</label></dt>
                        <dd>
                            <input type="text" name="users" value="" class="textCtrl AutoComplete" id="searchBar_users" />
                            <p class="explain">{xen:phrase separate_names_with_comma}</p>
                        </dd>
                    </dl>
          
                    <dl class="ctrlUnit">
                        <dt><label for="searchBar_date">{xen:phrase newer_than}:</label></dt>
                        <dd><input type="date" name="date" value="" class="textCtrl" id="searchBar_date" /></dd>
                    </dl>
              
                    <xen:if is="{$searchBar}">
                    <dl class="ctrlUnit">
                        <dt></dt>
                        <dd><ul>
                                <xen:foreach loop="$searchBar" value="{$constraint}">
                                    <li>{xen:raw $constraint}</li>
                                </xen:foreach>
                        </ul></dd>
                    </dl>
                    </xen:if>
                </div>
                <!-- end block: secondaryControls -->
          
                <dl class="ctrlUnit submitUnit">
                    <dt></dt>
                    <dd>
                        <input type="submit" value="{xen:phrase search}" class="button primary Tooltip" title="{xen:phrase find_now}" />
                        <div class="Popup" id="commonSearches">
                            <a rel="Menu" class="button NoPopupGadget Tooltip" title="{xen:phrase useful_searches}" data-tipclass="flipped"><span class="arrowWidget"></span></a>
                            <div class="Menu">
                                <div class="primaryContent menuHeader">
                                    <h3>{xen:phrase useful_searches}</h3>
                                </div>
                                <ul class="secondaryContent blockLinksList">
                                    <!-- block: useful_searches -->
                                    <li><a href="{xen:link find-new/posts, '', 'recent=21'}" rel="nofollow">{xen:phrase recent_posts}</a></li>
                                    <xen:if is="{$visitor.user_id}">
                                    <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}', 'content=thread'}">{xen:phrase your_threads}</a></li>
                                    <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}', 'content=post'}">{xen:phrase your_posts}</a></li>
                                    <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}', 'content=profile_post'}">{xen:phrase your_profile_posts}</a></li>
                                    </xen:if>
                                    <!-- end block: useful_searches -->
                                </ul>
                            </div>
                        </div>
                        <a href="{xen:link search}" class="button moreOptions Tooltip" title="{xen:phrase advanced_search}">{xen:phrase more}...</a>
                    </dd>
                </dl>
          
            </div>
      
            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
        </form>   
    </fieldset>
    </xen:hook>
</div>
j) search_bar.css
Code:

Code:
/* IB changed whole template for slide menu */

#searchBar .textCtrl, #searchBar .formPopup {width:96%;}
.searchmenu {display:inline-block; margin:0px 5px; width:100%;}

#searchBar
{
    margin:0.5em;
    width:100%;
}

    #QuickSearchPlaceholder
    {
            display:block;
    }

    #QuickSearch
    {
        display:block;

    }
      
        #QuickSearch .secondaryControls
        {
            display: none;
        }

        #QuickSearch.active
        {
            box-shadow: 5px 5px 25px rgba(0,0,0, 0.5);
            padding: 10px 0px 5px 10px;
            margin-right: 15px;
        }


    #QuickSearch .submitUnit .button
    {
        min-width: 0;
    }
  
    #QuickSearch input.button.primary
    {
        float: left;
        width: 50%;
    }

    #QuickSearch #commonSearches
    {
        float: right;
    }

        #QuickSearch #commonSearches .button
        {
            width: 23px;
            padding: 0;
        }
  
            #QuickSearch #commonSearches .arrowWidget
            {
                margin: 0;
                float: left;
                margin-left: 4px;
                margin-top: 4px;
            }

    #QuickSearch .moreOptions
    {
        display: block;
        margin: 0 24px 0 50%;
        width: auto;
    }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
    .Responsive #QuickSearchPlaceholder
    {
        display: block;
    }

    .Responsive #QuickSearchPlaceholder.hide
    {
        display: none;
    }
}
</xen:if>
2. Slide File
Upload the attached slide_menu.js file into the js folder of your XF installation

3. Styles
a) Upload the attached slide_menu_close.png file into the styles folder of your XF installation
b. Upload the attached font-awesome folder and files into the styles folder of your XF installation.

4. User Option
Under the Users tab of your admin panel create a new Custom User Field using:
Field ID: menu
Title: Menu Position
Description: Click this checkbox if you would like to have the main menu column displayed on the right side of the page instead of the left
Display Location: Preferences
Field Type: Checkboxes
- under options for choice fields tab
Possible Choices: 1
Possible Choices text field: Right
- Click "Save Field"

...and that is it, enjoy!
Author
ibaker
Downloads
38
Views
183
First release
Last update
Rating
5.00 star(s) 1 ratings

Latest reviews

This is by far, one of the most thought out, well structured, clean and user friendly off-canvas menus I have come across.
It is light, clean, fast, responsive and if you have the time and patience to incorporate this into your theme/style, then I highly recommend it.
You will not be disappointment and I am amazed that @ibaker is sharing this with the community. Bravo and thank you.
If you are developing, he has left plenty of scope to play with..
Top