I can't hide the first sub-item in the menu

Site URL: https://www.martinordonez.com/

Hi there,

I'm working with anchors and links to anchors. My menu item "Publications" has three sub-items: 1)publications, 2)journals, 3)conferences, 4)patents

The first one is a page, the other ones are links to anchors in that page.

I would like to hide the first item "Publications" from the list.

I've tried using this

.publications-folder.folder .folder-parent .folder-child li:first-child {
   display: none !important;
}

and many other similar solutions and could make it work.

Any help would be appreciated.

Thanks,

Lucas

You could try this, keep in mind, your code is using Javascript and changing the classlist names. So this could reset after a viewer has navigated away from your page and returned so be sure to test. Hopefully the css won't effect your code but something to get you in the right direction:

.subnav .collection:nth-child(1) {
display: none;
}

34 minutes ago, Wolfsilon said:

You could try this, keep in mind, your code is using Javascript and changing the classlist names. So this could reset after a viewer has navigated away from your page and returned so be sure to test. Hopefully the css won't effect your code but something to get you in the right direction:

.subnav .collection:nth-child(1) {
display: none;
}

 

Thanks @Wolfsilon! Where should I paste that code? Previously I tried putting it at the end of the CSS code I have for the site, in Home>Design>Custom CSS
Should I paste it there?

L.

Yeah. In your Custom CSS tab.

That works but has the issue that it is hiding the fist sub-menu item for all of my menu options, and I only need that for the "Publications" one.

I guess I just need to add something to that code to make specific to only that option?

Thanks in advance!

L

Hi @lucassinopoli You can use this CSS to only hide the first item in the publications folder dropdown:

[data-href="/publications-folder"] .subnav .collection:first-child {
  display: none;
}

4 hours ago, Chris.SE said:

Hi @lucassinopoli You can use this CSS to only hide the first item in the publications folder dropdown:

[data-href="/publications-folder"] .subnav .collection:first-child {
  display: none;
}

Thanks @Chris.SE for your help. Unfortunately, that code is not doing the job. After pasting it I still see the first item.

I also tried with the following

[data-href="/publications-folder"] .subnav .collection:nth-child(1) {
  display: none;
}

I know it's probably the same, but just in case. However, didn't work either 😞


 

@lucassinopoli

Try the following.

@media only screen and ( min-width : 641px ) {

  html:not( .touch-styles ) body:not( .force-mobile-nav ) .nav-wrapper .folder .subnav > div:first-child {
  
    display : none;

    }

  }

@media only screen and ( max-width : 640px ) {

  #sidecarNav .folder-toggle ~ .subnav > div:first-child {
  
    display : none;

    }
    
  }

This is for v7.0 using the Bedford template family and is specific to the need of the poster.

Let us know how it goes.

20 hours ago, lucassinopoli said:

Thanks @Chris.SE for your help. Unfortunately, that code is not doing the job. After pasting it I still see the first item.

Sorry, I messed up the CSS. This will work guaranteed!

[data-href="/publications-folder"] + .subnav .collection:first-child {
  display: none;
}

@creedon No need for media queries here since the desktop folder and mobile menu both use the same folder structure. You can use the above snippet to tackle both at once!

On 10/29/2021 at 2:29 PM, Chris.SE said:

Sorry, I messed up the CSS. This will work guaranteed!

[data-href="/publications-folder"] + .subnav .collection:first-child {
  display: none;
}

@creedon No need for media queries here since the desktop folder and mobile menu both use the same folder structure. You can use the above snippet to tackle both at once!

Hi @Chris.SE. It really worked! It's great!
Thanks very much,

L.

Hi, I have tried these for my site https://carnation-kazoo-blx3.squarespace.com/ (pw is website) and it won't work.. I tried to put an !important behind but no success..

2 hours ago, charlineca said:

I have tried these for my site and it won't work.

It doesn't work because the code was written for v7.0 using the Bedford template family and your site is v7.1.

Add the following to Design > Custom CSS.

.header-nav .header-nav-item--folder .header-nav-folder-title[ href="/about-us" ] ~ .header-nav-folder-content .header-nav-folder-item:first-child {

  display : none;
  
  }

Let us know how it goes.