XF 2.2 Where to find customization options for the following navigation icons

Tulpa

New member
Apologies for not knowing what they're called.

On mobile, the following four menu icons are available. I'd like to add a fifth so users don't have to click through the hamburger icon to reach the forum list. It seems to have collapsed "what's new" but I can't figure out the code or style property that makes this decision.

I've spent the week going through each style property and template trying to find it. I presumed it would be under Header & Navigation.

Screenshot_20220420-185727_Chrome.jpg

So my basic question is on how to add/remove/customize navigation icons in the top right corner of the site (particularly when navigation is collapsed).

Thanks!
 

Russ

Well-known member
Those are all controlled inside the PAGE_CONTAINER template.

Click inside the editor, hit ctrl-f and look for p-nav-opposite

Style properties are used more for controlling the appearance of certain things. Think font size, background colors and other things like that. Sometimes style properties are used to enable/disable certain things, but when you want to add custom links, that usually needs to be done inside the templates.
 

Tulpa

New member
Those are all controlled inside the PAGE_CONTAINER template.

Click inside the editor, hit ctrl-f and look for p-nav-opposite

Style properties are used more for controlling the appearance of certain things. Think font size, background colors and other things like that. Sometimes style properties are used to enable/disable certain things, but when you want to add custom links, that usually needs to be done inside the templates.

Thanks! Out of my utter ignorance in coding, I thought it would be clever to just copy/paste the code for "What's New" and replace it with values for Forums, like so:

CSS:
<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">
                    <a href="{{ link('whats-new') }}"
                        class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
                        aria-label="{{ phrase('whats_new')|for_attr }}"
                        title="{{ phrase('whats_new')|for_attr }}">
                        <i aria-hidden="true"></i>
                        <span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
                    <a href="{{ link('forums') }}"
                        class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--forumlist"
                        aria-label="{{ phrase('forum_list')|for_attr }}"
                        title="{{ phrase('forum_list')|for_attr }}">
                        <i aria-hidden="true"></i>
                        <span class="p-navgroup-linkText">{{ phrase('forum_list') }}</span>

To my utter astonishment, the website/server didn't collapse into a supermassive black hole. It's actually working as a link:

Screenshot 2022-04-20 at 20.18.41.png

But I have no idea how to get the icon view to to match other buttons, nor how to detach it from search and reunite it with alerts.
 

Brogan

XenForo moderator
Staff member
You have added your code inside the closing </a> tag for the other tab/link.

Move it out of the <a ...> ... </a>.

For the icon, use the extra.less template.
Less:
.p-navgroup-link.p-navgroup-link--forumlist i:after {
    content: "\f002";
    width: 1.28571429em;
    display: inline-block;
    text-align: center;
}

Change the icon (content) to suit.
 

Tulpa

New member
You have added your code inside the closing </a> tag for the other tab/link.

Move it out of the <a ...> ... </a>.

For the icon, use the extra.less template.
Less:
.p-navgroup-link.p-navgroup-link--forumlist i:after {
    content: "\f002";
    width: 1.28571429em;
    display: inline-block;
    text-align: center;
}

Change the icon (content) to suit.

I've got it the way I want but I just can't seem to put the right icon in to the corresponding line. When I type in the icon value for conversations, alerts, or what's new, it shows up. Below I've made it take the conversations logo:

Screenshot 2022-04-20 at 22.09.38.png

No idea why some are dimmer than others but that's a minor quibble.

Thanks!

edit: I tried "p-navgroup-link--sidebar" and this worked. I can live with this in place of the regular forum icon but any advice on getting them to look consistent in terms of dimming/color would be greatly appreciated.

Screenshot 2022-04-20 at 22.16.26.png

CSS:
                            <a href="{{ link('forums') }}"
                               [B] class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations[/B]
                                title="{{ phrase('forum list')|for_attr }}"
                                aria-label="{{ phrase('forum list')|for_attr }}"
                                aria-expanded="false"
                                aria-haspopup="true">
                                <i aria-hidden="true"></i>
                            </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')|for_attr }}"
                                data-menu-pos-ref="< .p-navgroup"
                                title="{{ phrase('conversations')|for_attr }}"
                                aria-label="{{ phrase('conversations')|for_attr }}"
                                aria-expanded="false"
                                aria-haspopup="true">
                                <i aria-hidden="true"></i>
                                <span class="p-navgroup-linkText">{{ phrase('nav_inbox') }}</span>
                            </a>
 
Last edited:

ge66

Well-known member
I've got it the way I want but I just can't seem to put the right icon in to the corresponding line. When I type in the icon value for conversations, alerts, or what's new, it shows up. Below I've made it take the conversations logo:

View attachment 267377

No idea why some are dimmer than others but that's a minor quibble.

Thanks!

edit: I tried "p-navgroup-link--sidebar" and this worked. I can live with this in place of the regular forum icon but any advice on getting them to look consistent in terms of dimming/color would be greatly appreciated.

View attachment 267378

CSS:
                            <a href="{{ link('forums') }}"
                               [B] class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations[/B]
                                title="{{ phrase('forum list')|for_attr }}"
                                aria-label="{{ phrase('forum list')|for_attr }}"
                                aria-expanded="false"
                                aria-haspopup="true">
                                <i aria-hidden="true"></i>
                            </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')|for_attr }}"
                                data-menu-pos-ref="< .p-navgroup"
                                title="{{ phrase('conversations')|for_attr }}"
                                aria-label="{{ phrase('conversations')|for_attr }}"
                                aria-expanded="false"
                                aria-haspopup="true">
                                <i aria-hidden="true"></i>
                                <span class="p-navgroup-linkText">{{ phrase('nav_inbox') }}</span>
                            </a>
You will find an answer here:
 
Top