Hide a menu item on mobile only

New Member
4 0 0
Hi There,

Hope someone knows the answer to this.
I am using the prestige theme and I would like to hide one specific menu item on mobile but keep the item on desktop.

Is this possible?
0 Likes
Explorer
83 11 11

Hello @Leoo 

 

We have to edit menu item from backend.
Please edit Menu Item NAME to '<span class="hide-mobile">NAME </span>'

 

-> Go to Online Store -> Theme -> edit code
-> asset -> theme.scss.liquid

 

Add below css lines at bottom of code

@media only screen and (max-width: 749px)
	.SidebarMenu__Nav .hide-mobile {
              display: none !important;
	}
}
Still not satisfied!!! contact me
Is it good solution? Yes, please Like.
0 Likes
New Member
4 0 0

Hi Excursionist, Thank you for reaching out! 

 

I have added the lines in the theme.scss.liquid but can you tell me where to change the <span class> ?

 

Thanks a lot!

0 Likes

@Leoo,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Explorer
83 11 11

Please see below pic for where to add 'span'.

 

Untitled.png

Still not satisfied!!! contact me
Is it good solution? Yes, please Like.
0 Likes
New Member
4 0 0

Hi Explorer, Thanks again for helping me out. I've tried everything to make it work, but it didnt. ;)

I have added the span-line into the navigation, and added the lines into the liquid file, i tried several combinations but it won't work. Could it be the theme? 

 

 

 

 

So i have added the line into the navigation item below: 

 

 

Screenshot 2020-01-05 at 17.50.50.pngSo, i have added the line into the navigation

Then i have added the lines to the theme.scss.liquid

Screenshot 2020-01-05 at 17.51.11.pngand added the line of css into the theme.scss.liquid

 

 

 

And this was the outcome,

Screenshot 2020-01-05 at 17.51.27.pngbut this is the outcome

0 Likes
Explorer
83 11 11

Hello @Leoo 

 

Please contact me personally, I will make it work.

Still not satisfied!!! contact me
Is it good solution? Yes, please Like.
0 Likes