XF 2.0 Add a menu item for mobile view only

[Mr Lucky]

Is it possible to create a menu item (main tab) that is only visible in the mobile off canvas menu?

Thanks.

 

[cimad]

Hi,

Create the new navigation menu. After that, enter this code in your extra.less

.p-nav .p-nav-list li:nth-of-type(1) {display: none;}

change the number (1) by the tab number according to the order shown.

For example

.p-nav .p-nav-list li:nth-of-type(2) {display: none;}
.p-nav .p-nav-list li:nth-of-type(3) {display: none;}
.p-nav .p-nav-list li:nth-of-type(4) {display: none;}
...

I do not know if you can change the number by the navs IDs, so if somebody knows...

regards

 

[Mr Lucky]

Thanks for the reply

But meanwhile I found another way to do it

 

[TWOKam]

Thanks for the reply

But meanwhile I found another way to do it

Hi Mr Lucky - could you share what the other way was please? I'd like to add links to our wordpress site in the mobile menu.

 

[Mr Lucky]

Hi Mr Lucky - could you share what the other way was please? I'd like to add links to our wordpress site in the mobile menu.

In your extra.less:

/* for nav only in mobile */

@media only screen and (min-device-width:375px)

{.mobilesonly

    {display:none }}

In your navigation item:

 

[Masetrix]

Thanks for this.
Is there also a Value for "Display condition:", to show only if it is a Member, or loggedin Member?

 

[Ozzy47]

You could use, $xf.visitor.user_id

 

[Oersted]

In your extra.less:

/* for nav only in mobile */

@media only screen and (min-device-width:375px)

{.mobilesonly

    {display:none }}

In your navigation item:

View attachment 171060

Thanks for providing these instructions. I have tried them but they are not working. Do I need to create the div class first in the page container or something?

<div class="mobilesonly">
</div>

 

[Mr Lucky]

Thanks for providing these instructions. I have tried them but they are not working. Do I need to create the div class first in the page container or something?

See post 5. The class is defined in the navigation item extra attributes

 

[Oersted]

See post 5. The class is defined in the navigation item extra attributes

Thanks. Yeah, that is what I did. Anyway, I will try and figure it out.