XF 2.1 hide specific navigation tabs for mobile

[Mr Lucky]

Can someone please tell me how I can do this?

Using the Public Navigation attributes or css

Thanks

 

[Russ]

There are no classes by default to target, something like the following would work...
Hides the third list item of the mobile list.

ul.offCanvasMenu-list > li:nth-of-type(3) {
    display: none;
}

but you need to be careful, depending on your tab permissions users could see different tabs. One example being is some users have access to a plugin that others don't.

 

[Kirby]

If you want smth. a little bit more sophisticated:

Include

<xf:js>
$(document).on('xf:reinit', function (ev, el) {
    if ($(el).hasClass('js-offCanvasNavTarget'))
    {
        $('.js-headerOffCanvasMenu a[data-nav-id]').each(function () {
            $(this).closest('li').attr('data-nav-id', $(this).data('nav-id'));
        });
    }
});
</xf:js>

somewhere on every page.

This does allow you to use selectors like ul.offCanvasMenu-list > li[data-nav-id="xfmg"] leveraging the navigation ID (as diplayed in Setup / Public Navigation).

Example

ul.offCanvasMenu-list > li[data-nav-id="xfmg"] { display: none; }