Folder Navigation and Styling Query

Site URL: https://www.mountainpeople.ie/

Hi all, 

I'm trying to make it so that the menu isn't clickable in a navigation. So only the links below it are clickable and not the actual menu itself. 

I'm trying to do it for this site: https://www.mountainpeople.ie/ for the 'Language' folder which is being used as a dropdown menu for a Translation integration from Weglot. Each link within the folder acts for a different language (Only one at the moment, more being added once I have addressed this).

I have attempted to make the folder title in the navigation itself one of the languages but this will not work with the Weglot integration, so each langauge will be offered within the dropdown. 

It would also be great if anyone could help as to how the dark background overlay can be removed from the folder itself once dropped down. 

I would really appreciate any help!

I managed to get it sorted after a few attempts, but I just realised it now doesn't operate correctly on mobile. The folder can't be opened at all .....?? Is there some way to restrict the CSS code to desktop version only? 

Thank you. 

53 minutes ago, Fiachra said:

I managed to get it sorted after a few attempts, but I just realised it now doesn't operate correctly on mobile. The folder can't be opened at all .....?? Is there some way to restrict the CSS code to desktop version only? 

Thank you. 

Try this

#mainNavigation label.folder-toggle-label {
    pointer-events: none;
}

That worked out perfectly and is operating on both desktop and mobile. 

Thank you for your help. 

@Fiachra I see on mobile, homepage icons look huge. You can add this to Design > Custom CSS to resize them.

/* mobile home icons */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1593781604230_1061405+.row>.span-1 {
    width: 33.33% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1593781604230_1061405+.row>.span-1:nth-child(3n+1) {
    clear: left;
}
}

@tuanphan you're amazing!