Jump to content

Hide submenu item on desktop only

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://woodliving.dk/

Hi

I have added a link in my main menu folder to enable visitors go to a landing page when they click on the menu title. But on mobile this doesn't work.

image.png.43d929463a9b1a7ad48a3659aeaeecb3.png

1. Is it possible to make the link visible in mobile menu?

Now I have directly added the landing page(Nordic) to the menu folder Right under link. And it looks good on mobile. If posible I would like "Nordic" to be bold

2. How so I make "Nordic"  bold in mobile only.

image.png.ddc294536f10d4c0b3370a0ec822ba5b.png

But on desktop version I now have two "NORDIC" both linking to the same landing page. On the desktop version I want to hide the sub menu item "NORDIC".

3. How do I hide "NORDIC" in the sub menu?

image.png.0e4708ad23b7349d8f3f1d13e1f9442b.png

 

Any help would be appreciated.

Best regards
Thomas  

 

Edited by Mr-WOODLVING
Link to comment
  • Replies 6
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Add to Home > Design > Custom CSS

/* Hide nordic on desktop */
@media screen and (min-width:641px) {
[href="/nordic-folder"]+span a:first-child {
    display: none;
}
}
/* Bold nordic on mobile */
a.Mobile-overlay-folder-item[href="/nordic"] {
    font-weight: bold;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
On 9/19/2020 at 6:26 AM, tuanphan said:

Add to Home > Design > Custom CSS

/* Hide nordic on desktop */
@media screen and (min-width:641px) {
[href="/nordic-folder"]+span a:first-child {
    display: none;
}
}
/* Bold nordic on mobile */
a.Mobile-overlay-folder-item[href="/nordic"] {
    font-weight: bold;
}

 

I tried using this technique but not only did it not work, it also ended up removing in all the styling I had previously given to to the all the navigation items and the dropdown menu (e.g. transparency and hover effects).

Can you think how to achieve the same effect but also maintaining all the styling I have already made to the header nav items and folders?

I want to remove the "All Countries" item from the desktop site only, because I am already using a script which makes the folder title clickable, but I want to maintain an item on the mobile version which takes people to that overview page.

This is what my header nav looked like before:

702190179_Screenshot2022-09-01at14_14_35.thumb.jpg.7ebae8cc0bd4d00849947677613d9e36.jpg

And this is what it looked like after I used the CSS  above:

1743497939_Screenshot2022-09-01at14_15_13.thumb.jpg.9f642381af92b44dad8258d3a65fdfbb.jpg

Any ideas?

Link to comment
On 9/1/2022 at 6:20 PM, liorshva said:

I tried using this technique but not only did it not work, it also ended up removing in all the styling I had previously given to to the all the navigation items and the dropdown menu (e.g. transparency and hover effects).

Can you think how to achieve the same effect but also maintaining all the styling I have already made to the header nav items and folders?

I want to remove the "All Countries" item from the desktop site only, because I am already using a script which makes the folder title clickable, but I want to maintain an item on the mobile version which takes people to that overview page.

This is what my header nav looked like before:

702190179_Screenshot2022-09-01at14_14_35.thumb.jpg.7ebae8cc0bd4d00849947677613d9e36.jpg

And this is what it looked like after I used the CSS  above:

1743497939_Screenshot2022-09-01at14_15_13.thumb.jpg.9f642381af92b44dad8258d3a65fdfbb.jpg

Any ideas?

What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/3/2022 at 12:44 PM, tuanphan said:

What is your site url?

liorshvanew.squarespace.com

Password: Migdal

BTW, I have removed the "All Countries" item from the menu for now, until I figure out the solution. Would it help you if I add it back?

Edited by liorshva
additional info
Link to comment
14 hours ago, liorshva said:

liorshvanew.squarespace.com

Password: Migdal

BTW, I have removed the "All Countries" item from the menu for now, until I figure out the solution. Would it help you if I add it back?

Yes. You need to add it back. If your site is live & you can't add it, you can duplicate the site & add there

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.