Add menu link to forum index on mobile/narrow?

RobParker

Registered
I love the forum style but the only issue is that in mobile view, the Forums link ends up off-canvas.

Screen Shot 2018-02-06 at 17.42.06.png

It's probably one of the most important links so ideally we'd place a symbol for it next to the Conversations icon.

Is that easy enough to do? Having it only in narrow mode would be ideal.
 

Steve

Pixel Exit Staff
Can be done yes, though not much room and would likely need hidden on smaller view ports such as iPhone 5 or similar.

Was thinking an option for a future release to replace the logo with “important” links which could defined by the admins, thoughts? I for one don’t see much point in the logo in the nav, users know what site they’re on, it’s mostly a cosmetic thing.
 

RobParker

Registered
We've started getting feedback from users and one of their comments was that the mobile style looks quite sterile and could do with more images. I think removing practically the only image in the design works from a practical point of view but maybe not as aesthetic one.
 

Russ

Pixel Exit Staff
Are you running a home page? Or does the logo link directly to the forums currently?
 

Russ

Pixel Exit Staff
You could edit PAGE_CONTAINER:

Code:
            <a class="p-nav-menuTrigger" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" role="button" tabindex="0">
                <i aria-hidden="true"></i>
                <span class="p-nav-menuText">{{ phrase('menu') }}</span>
            </a>

Find that, add this right below:

Code:
 <a class="p-nav--extralink" href="/forums/">
                <i class="fa fa-comments"></i>
            </a>

Then extra.less:

Code:
.p-nav--extralink
{
    vertical-align: middle;
    align-self: center;
    margin-right: 5px;
    padding: 10px 8px;
    font-size: 20px;
}
 

RobParker

Registered
That doesn't quite do what I want.

Ideally it'd be just in front of the visitortabs. I added it before them in page_container but that doesn't really work either.

It'd also be good if it only showed on mobile widths or was otherwise hidden.

(I appreciate that's all asking a lot!)
 

RobParker

Registered
Does this make sense?

In PAGE_CONTAINER inside the visitor tabs macro:

Code:
    <div class="menu menu--structural menu--wide menu--account" data-menu="menu" aria-hidden="true"
                               data-href="{{ link('account/visitor-menu') }}"
                               data-load-target=".js-visitorMenuBody">
                               <div class="menu-content js-visitorMenuBody">
                                   <div class="menu-row">
                                       {{ phrase('loading...') }}
                                   </div>
                               </div>
                           </div>

                           <a href="index.php?forums/"
                               class="p-navgroup-link p-navgroup-link--iconic p-nav--extralink">
                               <i aria-hidden="true"></i>
                               <span class="p-navgroup-linkText">Forums</span>
                           </a>
                          
                           <a href="{{ link('conversations') }}"
                               class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}"
                               data-badge="{$xf.visitor.conversations_unread|number}"
                               data-xf-click="menu"
                               data-xf-key="{{ phrase('shortcut.conversations_menu') }}"
                               data-menu-pos-ref="< .p-navgroup"
                               aria-expanded="false"
                               aria-haspopup="true">
                               <i aria-hidden="true"></i>
                               <span class="p-navgroup-linkText">{{ phrase('inbox') }}</span>
                           </a>

Then

Code:
.p-nav--extralink
{
  
   &::before
        {
            .m-faBase();
            content: @fa-var-exclamation-triangle " ";
   }
          
}

It seems to work. The only downside is it shows on the full width when I don't really want it to.
 

RobParker

Registered
This works but is probably horrible!

Code:
.p-nav--extralink{
   display:none;
}

@media (max-width: @xf-responsiveNarrow)
{
.p-nav--extralink
{
   display: block !important;
   &::before
        {
            .m-faBase();
            content: @fa-var-comments " ";
   }
           
}
}
 

Russ

Pixel Exit Staff
Should be good, but change responsiveNarrow -> responsiveMedium

Medium is when the off-canvas activates.
 

RobParker

Registered
Is that an ok way to do it with the display none and then display block important inside the media query?

I didn't know if there was a way to put them both inside a conditional somehow.
 

Russ

Pixel Exit Staff
Is that an ok way to do it with the display none and then display block important inside the media query?

I didn't know if there was a way to put them both inside a conditional somehow.

Ya that's fine, it's how XF approaches a lot of things.
 

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.