Mobile Navigation

Support Forums

Public support forums for active customers

Documentation

Read up on the basics of our styles in our documentation area

Bug Reports

Report those bugs so we can squash them!

Ticket Support

Need help in private? View or create a support ticket

Redh

Redh

Registered
Hello! I would like to update the navigation bar look for use on mobiles. To start us off, this is my full navigation bar, which I would like to keep the same (currently deciding whether to keep the top right visitor text or switch to icons):

nav_normal.jpg


Now at the moment, on a mobile platform, the menu is changed to look like this:

nav_mobile.jpg


I really love the mobile menu that appears when you click the bars - very classy! But I'm not too keen on the rest of it. I'd like users to have access to the main website links also, which for me would be Home and Forums, and then use the off-screen menu for other less important sections. Also, for the mobile view I'd like the top right visitor tabs to be switched to icons. In all, it would look like this:

nav_mobile_new.jpg


And on the forums tab:

nav_mobile_new2.jpg


I think this would make using the mobile navigation much easier for most users, as you'll need to use the off-screen navigation less, and obviously will have easier access to the main features. This is closer to how the default skin works.

Is this something you'd be interested in changing by default in Xenbase, or should I work on customising this just for my skin?

Many thanks :)
 
Sort by date Sort by votes
It's not something we'd put into XenBase I believe, currently the way it functions is drops all main navigation links, shows the sub-nav for the currently selected tab and adds New Posts next to it.

The problem is with your suggestion in regards to XenBase a ton of people aren't running a Home Link, and the room is very limited in scenarios at 320px.

What you can do is something like this:

Style Properties: └ ─ Mobile Enhancements -> Enable New Posts Link (uncheck this)

Style Properties: [XB] Font Awesome -> Enable FA Icons in the Visitor Tabs (check)

Code: 
.publicTabs .navTab.articles .navLink, .publicTabs .navTab.forums .navLink
{
   display: block !important;
}
.menuText
{
   display: none;
}

With the FA Icons in the visitor tabs on, it'll automatically hide the text in smaller resolutions.
 
Upvote 0 Downvote
No problem - thanks, I'll play around with it. I'm sure people are running more than one tab even if this isn't a home tab - they may have Forums and Members, or Help or something. But it's no problem - just thought I'd check first before trying to make too many changes :)
 
Upvote 0 Downvote
Redh said:
No problem - thanks, I'll play around with it. I'm sure people are running more than one tab even if this isn't a home tab - they may have Forums and Members, or Help or something. But it's no problem - just thought I'd check first before trying to make too many changes :)
Click to expand...

Hopefully that little CSS works for you, it's not a difficult change, we can examine if it makes sense to put an option into XenBase.
 
Upvote 0 Downvote
Ok, so I've been working on this, and this is what I've come up with. I'm sorry if this isn't very clear - I can post the complete template files if that would be easier!

Basically, my desktop navigation bar looks like this:

nav_normal2.jpg


Before these changes my navigation looked like this on a mobile:

nav_mobile.jpg


And after these changes, my navigation now looks like this on a mobile - the desktop version hasn't changed at all:

nav_mobile_after.jpg


Template Edit: navigation
Replace:

Code: 
<a id="xbOffCanvasToggle" onclick="return false;" class="slideLeft" href="#"><i class="fa fa-bars fa-fw"></i> <span class="menuText">{xen:phrase 'menu'}</span></a>
<xen:if is="@xb_offcanvas_menu_newposts"><a href="{xen:link find-new/posts}" rel="nofollow" class="xbOffCanvasNew Tooltip" title="{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}"> <i class="fa fa-commenting fa-fw"></i><span>{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</span></a></xen:if>

With this:

Code: 
<ul class="permTabs">
<!-- Mobile Menu Bars -->
<li class="navTab"><a id="xbOffCanvasToggle" onclick="return false;" class="slideLeft" href="#"><i class="fa fa-bars fa-fw"></i><xen:comment> <span class="menuText">{xen:phrase 'menu'}</span></xen:comment></a>
<xen:if is="@xb_offcanvas_menu_newposts"><a href="{xen:link find-new/posts}" rel="nofollow" class="xbOffCanvasNew Tooltip" title="{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}"> <i class="fa fa-commenting fa-fw"></i><span>{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</span></a></xen:if>
</li>

Directly under this code, before the closing DIV, we want to cut & paste the tab information we want to remain into this area before the DIV. So for example, I want to keep my home and forum link - these are indicated in the "navigation" template by html comments as follows:

Code: 
<!-- home -->
content here...

<!-- forums -->
content here...

So we'll cut all of the relevant code from below, and add it just after the last code we replaced. After we have done that, add the closing UL html tag. My section for all of this looks like this:

Code: 
<div class="navTabs">
<xen:if is="@xb_nav_stretch OR @xb_widen"><div class="xbMaxwidth"></xen:if>   
    <xen:if is="@xb_offcanvas_menu">
    <div class="xbOffCanvasControls">
    <ul class="permTabs">
        <!-- Mobile Menu Bars -->
        <li class="navTab"><a id="xbOffCanvasToggle" onclick="return false;" class="slideLeft" href="#"><i class="fa fa-bars fa-fw"></i><xen:comment> <span class="menuText">{xen:phrase 'menu'}</span></xen:comment></a>
        <xen:if is="@xb_offcanvas_menu_newposts"><a href="{xen:link find-new/posts}" rel="nofollow" class="xbOffCanvasNew Tooltip" title="{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}"> <i class="fa fa-commenting fa-fw"></i><span>{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</span></a></xen:if>
        </li>

        <!-- home -->
        <xen:if is="{$showHomeLink}">
            <li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink"><xen:if is="@xb_usehomeicon"><i class="fa fa-home"></i><xen:else />{xen:phrase home}</xen:if></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}">
            <xen:if is="@xb_nav_disablesub">
            <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected'} Popup PopupControl PopupClosed">
            <xen:else />
            <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
            </xen:if>

           
                <a href="{$extraTab.href}" class="navLink<xen:if is="@xb_nav_disablearrow"> NoPopupGadget" rel="Menu</xen:if>">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                <xen:if is="!@xb_nav_disablearrow"><a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a></xen:if>
                <div class="xbTabPopupArrow">
                    <span class="arrow"><span></span></span>
                </div>
               
                                <xen:if is="@xb_nav_disablesub">
                <div class="{xen:if {$extraTab.selected}, 'selectedMenu'} Menu JsOnly tabMenu {$extraTabId}TabLinks">
                <xen:else />
                <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                </xen:if>
                <xen:if is="@xb_nav_stretch OR @xb_widen"><div class="xbMaxwidth"></xen:if>
                    <div class="primaryContent menuHeader">
                        <h3>{$extraTab.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    {xen:raw $extraTab.linksTemplate}
                <xen:if is="@xb_nav_stretch OR @xb_widen"></div></xen:if>
                </div>
            </li>
            <xen:else />
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <a href="{$extraTab.href}" class="navLink<xen:if is="@xb_nav_disablearrow"> NoPopupGadget" rel="Menu</xen:if>">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                    <div class="xbTabPopupArrow">
                        <span class="arrow"><span></span></span>
                    </div>
                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                </li>
            </xen:if>
        </xen:foreach>
        </xen:if>
       
       
        <!-- forums -->
        <xen:if is="{$tabs.forums}">
       
            <xen:if is="@xb_nav_disablesub">
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected'} Popup PopupControl PopupClosed">
            <xen:else />
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'Popup PopupControl PopupClosed'}">
            </xen:if>
               
                <a href="{$tabs.forums.href}" class="navLink<xen:if is="@xb_nav_disablearrow"> NoPopupGadget" rel="Menu</xen:if>">{$tabs.forums.title}</a>
                <xen:if is="!@xb_nav_disablearrow"><a href="{$tabs.forums.href}" class="SplitCtrl" rel="Menu"></a></xen:if>
                <div class="xbTabPopupArrow">
                    <span class="arrow"><span></span></span>
                </div>
               
                <xen:if is="@xb_nav_disablesub">
                <div class="{xen:if {$tabs.forums.selected}, 'selectedMenu'} Menu JsOnly tabMenu forumsTabLinks">
                <xen:else />
                <div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} forumsTabLinks">
                </xen:if>

                <xen:if is="@xb_nav_stretch OR @xb_widen"><div class="xbMaxwidth"></xen:if>
                    <div class="primaryContent menuHeader">
                        <h3>{$tabs.forums.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <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">{xen:phrase mark_forums_read}</a></li></xen:if>
                        <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</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'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>
                    </xen:hook>
                    </ul>
                <xen:if is="@xb_nav_stretch OR @xb_widen"></div></xen:if>
                </div>
            </li>
        </xen:if>
        </ul>
    </div>
    </xen:if>

Template Edit: navigation_visitor_tab

These next three edits will remove the Username and Conversations tabs on the right hand side on mobile view (basically, any tabs you want to hide in mobile view, just wrap with hideAccount span class):

Find:

Code: 
<!-- account -->

And ADD directly below:

Code: 
<span class="hideAccount">

Find:

Code: 
<!-- conversations popup -->

and REPLACE with this:

Code: 
</span>
   
<!-- conversations popup -->
<span class="hideAccount">

Finally, to add the closing span, replace:

Code: 
<xen:hook name="navigation_visitor_tabs_middle" />

with this:

Code: 
</span>
   
<xen:hook name="navigation_visitor_tabs_middle" />

Now I wanted to show the Alerts tab (replacing the text with an icon to save space). To do this, replace this:

Code: 
<a href="{xen:link account/alerts}" rel="Menu" class="navLink NoPopupGadget"><xen:if is="@xb_fa_visitor_tabs"><i class="fa fa-bolt fa-fw"></i></xen:if> <span class="xbVisitorText">{xen:phrase alerts}</span>

With this code:

Code: 
<a href="{xen:link account/alerts}" rel="Menu" class="navLink NoPopupGadget"><xen:if is="@xb_fa_visitor_tabs"><i class="fa fa-bolt fa-fw"></i> <span class="xbVisitorText">{xen:phrase alerts}<xen:else /><span class="showAccount"><i class="fa fa-bell fa-fw"></i></span><span class="hideAccount"> <span class="xbVisitorText">{xen:phrase alerts}</span></span></xen:if>

Template Edit: EXTRA.css

Finally, add the following to your EXTRA.css file:

Code: 
<xen:comment>Mobile Home and Forum Tabs</xen:comment>
.navTabs .permTabs
{
    float: left;
    @property "xb_navTab_publicTabs";

    @property "/xb_navTab_publicTabs";
}

.navTabs .permTabs .navLink
{
    padding: 0 15px;
}

<xen:comment>Mobile visitor Tabs</xen:comment>
.showAccount {
    display:none !important; }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth) {
    .hideAccount {
        display:none !important; }
    .showAccount {
    display:inline !important; }
}
</xen:if>

Phew - that's it! I don't know if this is the best way to achieve the results I wanted, but it's working in both normal browser and mobile. If you spot any mistakes or potential problems, please let me know :)
 
Upvote 0 Downvote
I've just updated my Core Dark style to the latest 1.5.9, and I had to redo these navigation changes on a reverted template. I'm very glad I posted the instructions here, so I hope you don't mind me adding another change I made after creating this thread so that if I need to do them again they'll be on record! It may also help someone else :D

This is a quick change to add the Conversations option to my mobile navigation (I am converting the text to an FA icon).

In "navigation_visitor_tab", find the following code:

Code: 
<a href="{xen:link conversations}" rel="Menu" class="navLink NoPopupGadget"><xen:if is="@xb_fa_visitor_tabs"><i class="fa fa-envelope fa-fw"></i></xen:if> <span class="xbVisitorText">{xen:phrase inbox}</span>

And REPLACE it with this:

Code: 
<a href="{xen:link conversations}" rel="Menu" class="navLink NoPopupGadget"><xen:if is="@xb_fa_visitor_tabs"><i class="fa fa-envelope fa-fw"></i> <span class="xbVisitorText">{xen:phrase inbox}<xen:else /><span class="showAccount"><i class="fa fa-envelope fa-fw"></i></span><span class="hideAccount"> <span class="xbVisitorText">{xen:phrase inbox}</span></span></xen:if>

And that's it. Here, along with all the other code edits above, is the final result:

nav_mobile_conv.jpg


Thanks!
 
Upvote 0 Downvote
Updates for the latest version.

Template Edit: navigation
REPLACE
Code: 
<a onclick="return false;" class="slideLeft xbOffCanvasToggle" href="#"><i class="fa fa-bars fa-fw"></i> <span class="menuText">{xen:phrase 'menu'}</span></a>
        <xen:if is="@xb_offcanvas_menu_newposts"><a href="{xen:link find-new/posts}" rel="nofollow" class="xbOffCanvasNew Tooltip" title="{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}"> <i class="fa fa-commenting fa-fw"></i><span>{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</span></a></xen:if>

WITH
Code: 
<ul class="permTabs">
<!-- Mobile Menu Bars -->
<li class="navTab">
<a onclick="return false;" class="slideLeft xbOffCanvasToggle" href="#"><i class="fa fa-bars fa-fw"></i> <xen:comment> <span class="menuText">{xen:phrase 'menu'}</span></xen:comment></a>
<xen:if is="@xb_offcanvas_menu_newposts"><a href="{xen:link find-new/posts}" rel="nofollow" class="xbOffCanvasNew Tooltip" title="{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}"> <i class="fa fa-commenting fa-fw"></i><span>{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</span></a></xen:if>
</li>

navigation_visitor_tab
(Fix for Conversations icon)
REPLACE
Code: 
<a href="{xen:link conversations}" rel="Menu" class="navLink NoPopupGadget"><xen:if is="@xb_fa_visitor_tabs"><i class="fa fa-envelope fa-fw"></i></xen:if> <span class="xbVisitorText">{xen:phrase inbox}</span>

WITH
Code: 
<a href="{xen:link conversations}" rel="Menu" class="navLink NoPopupGadget"><xen:if is="{xen:property xb_fa_visitor_tabs}"><i class="fa fa-envelope fa-fw"></i> <span class="xbVisitorText">{xen:phrase inbox}<xen:else /><span class="showAccount"><i class="fa fa-envelope fa-fw"></i></span><span class="hideAccount"> <span class="xbVisitorText">{xen:phrase inbox}</span></span></xen:if>

@Russ - any chance you'd reconsider using something like this as an option by default? With more and more visitors using smart phones and other devices to browse forums, this solution is much more user-friendly and easy to use than what we currently have. I don't think you should be worrying so much about users with 320px mobiles - they all have HD now! :D
 
Upvote 0 Downvote
I think having a little helper template which would be easy to customize rather than editing the navigation template would be nice.

As for the visitor icons I'm a little confused what you're doing there to be honest. We want the text inside a span "xbVisitorText" which allows you to hide just the text using CSS at whatever view you want. We by default hide the text if the FA icons are enabled at the Narrow width.
 
Upvote 0 Downvote
Russ said:
I think having a little helper template which would be easy to customize rather than editing the navigation template would be nice.
Click to expand...

I don't know anything about helper templates - I'll look into that. If there's an easier way to keep these changes through updates that would be awesome.

Russ said:
As for the visitor icons I'm a little confused what you're doing there to be honest. We want the text inside a span "xbVisitorText" which allows you to hide just the text using CSS at whatever view you want. We by default hide the text if the FA icons are enabled at the Narrow width.
Click to expand...

On desktop width I have no FA icons, but text for the visitor icons. But when it switches to narrow width the text is replaced with FA icons.

The default skin gives me this:

wide_2.jpg

narrow_2.jpg


My version gives me this:

wide_1.jpg

narrow_1.jpg


To me it's far more useful to have visible links to the Home and Forums sections, with the rest accessible through the menu icon. I understand that some people do not have a homepage, but this could be used for anything else - the members page, a chat add-on, a gallery, etc.
 
Upvote 0 Downvote
A helper template is just a template that would be included inside another. Navigation can get changed often as we're always looking to make improvements so what we can look into doing is having the off-canvas controls in their own template to allow folks to easily edit it.

For the FA icons:

Style Properties: [XB] Font Awesome -> Enable FA Icons in the Visitor Tabs

This is the property that will show the icons, they show them at all times then as you reduce the screen the text is hidden and the icon keeps. You can also hide the icons in resolutions above the "narrow" point where we'd normally hide the text.
 
Upvote 0 Downvote
I see now - so yes, I can take out a chunk of my template edits for the visitor icons and just use CSS now. I don't think I was able to do that when I originally coded it, and I've been sticking to my old solution throughout all the updates :D

I'll play with the CSS to hide the icons at wide resolutions tomorrow.

As for the Home / Forums tabs, I'm not 100% sure what I could do there differently, but I'll look at it with fresh eyes.

I appreciate the help, thank you! :)
 
Upvote 0 Downvote
Redh said:
I see now - so yes, I can take out a chunk of my template edits for the visitor icons and just use CSS now. I don't think I was able to do that when I originally coded it, and I've been sticking to my old solution throughout all the updates :D

I'll play with the CSS to hide the icons at wide resolutions tomorrow.

As for the Home / Forums tabs, I'm not 100% sure what I could do there differently, but I'll look at it with fresh eyes.

I appreciate the help, thank you! :)
Click to expand...

The custom home/forum link being in there would require a template edit still so that part is correct :D. Next patch I think I'll make a slight change here which will allow for some custom links there.
 
Upvote 0 Downvote
You must log in or register to reply here.

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

View our stylesBrowse all our XenForo styles
DocumentationEssential information for our styles
Back