Add menu link to forum index on mobile/narrow?

[RobParker]

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

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]

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]

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]

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

 

[RobParker]

The logo links to our homepage, not the forum index. Otherwise it wouldn't be an issue

 

[Russ]

You could edit PAGE_CONTAINER:

            <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:

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

Then extra.less:

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

 

[RobParker]

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]

Does this make sense?

In PAGE_CONTAINER inside the visitor tabs macro:

    <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

.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]

 

[RobParker]

This works but is probably horrible!

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

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

 

[Russ]

Should be good, but change responsiveNarrow -> responsiveMedium

Medium is when the off-canvas activates.

 

[RobParker]

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]

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.