[peterjitg@yahoo.comParticipant]

Hello,

I have some links in my navbar that I want to only show on PC but hide in mobile view. Is it possible to hide a particular menu link from mobile/tablet view and only keep it on PC?

I’m using Ethos.

Thanks

[JoaoModerator]

Hi Peter

Yes it is possible but to be able to assist you, you need to provide us your website url.

Thanks.

Joao

[peterjitg@yahoo.comParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

Thank you for providing the URL. You’ll need to add a class to any particular menu item and then hide it with CSS, please refer to this tutorial http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item for adding a class to a menu item for example add hideMobile to the menu item and then add the following CSS to your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 979px){
.hideMobile {
display: none !important;
}
}

Let us know how this goes!

[peterjitg@yahoo.comParticipant]

Hm, that did the trick but it also caused some issues. After applying the code, for whatever reason all my article titles became much smaller in size and my article featured images went missing. See attached:

https://www.dropbox.com/s/o0xvzg80hc1ykgf/2.png?dl=0
https://www.dropbox.com/s/amrcjoinvoxxrte/3.png?dl=0

For now to avoid this issue, I removed the code from the site.

[Nabeel AModerator]

Hi again,

The above code should not cause any issue with the content. If you’ve added the class in the particular menu item then it will only hide the menu item in mobile devices. Can you please add the code again and leave it for a while so we can take a closer look?

Thanks!

[peterjitg@yahoo.comParticipant]

Hi Nabeel,

I can do that but I usually get a response here in 24 hours and I can’t leave the code up for 24 hours because it effects all of my posts. If I knew exactly when you’d be able to take a look, I can add it then? Can we agree on some kind of time frame?

[JoaoModerator]

Hi Ni,

Please leave it without the code and we will test it.

Can you mention which links specifically you would like to hide?

Please provide your admin credentials so we can have a better look at the issue and do not forget to mark the reply as private.

Thanks

Joao

[peterjitg@yahoo.comParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi there,

Please add the following code to your Customizer / Custom / CSS

.x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu a, .x-navbar .mobile .x-nav li.menu-item-23586   > a { 
display: none;  
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu a, .x-navbar .mobile .x-nav li.menu-item-23585   > a { 
display: none;  
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu a, .x-navbar .mobile .x-nav li.menu-item-23584   > a { 
display: none;  
}

Hope that helps,

Joao

[peterjitg@yahoo.comParticipant]

That did it, thank you 🙂

[JoaoModerator]

You are welcome.

[Author]

Posts