Hide submenu item on desktop only

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.

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.

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?

Any help would be appreciated.

Best regards
Thomas  

Hi.

Edit:

Thank you...  it worked perfect. 

Quote

nth-child(2) solved it.

This nth-child worked because the was already some CSS code that disabled the first child.

Now I have cleaned up the code and the function was as intended.

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:

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

Any ideas?

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:

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

Any ideas?

What is your site url?

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?

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