Please help with clickable folder code!

Site URL: http://lightsandlines.art

Passcode: testing

Please help me take a look at how to make the folder clickable. I understand from previous posts that different templates might require different code. 

Originally I didn’t think much of the folders not being clickable but after some customer testing, it became an issue that’s been repeatedly address. Please help, and thank you in advance!

Please see Make Navigation Folders Clickable.

Let us know how it goes.

Hi Creedon,

Thanks to your help I was able to make the menu clickable, but I would also like to hide the first item on the drop down, please help me understand how that can be achieved. Much appreciated!

My site is http://lightsandlines.art passcode:testing

I’m trying to utilize this for the work/shop/podcast categories.

4 hours ago, LALstudio said:

but I would also like to hide the first item on the drop down

Add the following to Design > Custom CSS.

/* desktop menu folder first item hide */

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:first-child {

  display : none;
  
  }

This is for v7.1.

Let us know how it goes.
 

It worked! Thank you!

I have another question.

Is it possible to do the same, as to hide the first item in folder drop-down when viewed on mobile devices? I have received feedback saying it’s kinda confusing to the audience. Thank you!

7 minutes ago, LALstudio said:

Is it possible to do the same, as to hide the first item in folder drop-down when viewed on mobile devices?

No because of the structure of mobile menus.

At the first level we see Work for example. If this link were made to go to the first menu item like on desktop there would be no way to get to the submenu.

If the Work link was removed from the submenu then you couldn't get to the actual link of interest.

Hi is there a way I could get that code for version 7.0?

17 hours ago, Cristal said:

Hi is there a way I could get that code for version 7.0?

Each template in 7.0 will require a different code. If you share link to your site, we can give code easier

THANKS SO MUCH!!!

I was able to create a folder and make the drop down clickable. Is it possible to link the folder to a page?

I would like to have the SHOP folder linked to the current CATEGORIES page.

www.soulmaidjewelry.com

Also, the drop down is now transparent. I'd like to change the color so the drop down is readable on all pages. 

The following is my current Header CSS. Can I change it within the code or just add something to change the dropdown background color?

CSS:

 

@media screen and (min-width:768px) {
section.ProductItem-details {
    padding-top: 0 !important;
}
}

.header-nav-item:hover>a {
    color: #f5ae93 !important;
}
.header-nav-folder-item:hover a {
    color: #f5ae93 !important;
}

.header-nav-item--active a {
    background: none !important;
}

/* Shop category color on hover */
li.category-item a:hover {
    color: #f5ae93;
}

.header-menu-bg.theme-bg--primary {
    background: white;
}
.header-menu-nav * {
    color: #E1CCBE !important;
}
span.chevron.chevron--right {
    transform: rotate(135deg);
}

13 hours ago, Juelz said:

Is it possible to link the folder to a page?

Did you see my post?