hiding certain links in navigation bar on some pages

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

I am expanding a website to have specific differences based on the users location. Based on selecting "North America" or "Somewhere Else" on a marketing popup, I will provide different resources. Therefore, I want to hide different navigation links on different pages. 

I am using 7.1 Commerce plan and tried injecting the following code in to page headers, but nothing is happening:

What am I doing wrong?

Thank you!

As far as I can tell there are no links in header with that href (url) so the code can not hide it.

Thanks for the guidance. The For Physicians tab links to this page. https://www.covidlonghaulers.com/collaborate

That's why I used /collaborate.

Should I use something else?

Thanks

Ah. Looks like a CSS specificity issue. Try the following.

<style>

  .tweak-global-animations-animation-type-flex .header-nav-item:not( .header-nav-item--folder ) [href="/collaborate"] {
  
    display : none;
  	
    }
    
  </style>

Let us know how it goes.

I added <style> </style> to it and it works! That may have been obvious to you. 😉
Now there is an clear spacing issue where the link is hidden. I'm sure that can be fixed too.

<style> .tweak-global-animations-animation-type-flex .header-nav-item:not( .header-nav-item--folder ) [href="/collaborate"] {
  
  display : none;
  
  }</style>

THANK YOU!

Quote

Now there is an clear spacing issue where the link is hidden. I'm sure that can be fixed too.

That is actually a bit tricky because hiding the link itself with the CSS you have does not hide its parent item which contains the padding.

If you want to hide the whole element then you can't use the href. You have to target its parent item by position. That can get a bit messy as you have to update it each time the menu changes. Sometimes it's the only choice but you have to keep that in mind.

<style>

  .header-nav-item:nth-child( 4 ) {
  
    display : none;
    
    }
    
  </style>

creedo, is it possible to do this same thing with folders? Thanks!

3 hours ago, ggoodno said:

is it possible to do this same thing with folders?

In general anything can be hidden. But how it gets done, if it can be done, depends on what you are trying to hide and when you want it hidden.

I was having the same problem so this thread has been very helpful! Thank you!

I'm wondering how you also hide the same elements in a mobile menu? 

15 hours ago, CoveLE said:

I was having the same problem so this thread has been very helpful! Thank you!

I'm wondering how you also hide the same elements in a mobile menu? 

Which element? What is your site url?

@tuanphan and @CoveLE did you ever get an answer about hiding elements on the mobile menu? I sure could use that guidance.

thank you!

George

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

Hello!
I have a need to hide certain menu links on different pages. I used the following code to achieve that on the desktop site. Everything works great! Though I also need to code the mobile page's hamburger to react the same way. My current workaround it to remove the hamburger and display the links. It's functional, but not good for style or functionality.

I had hoped some form of this script would work -  
But unfortunately, it does absolutely nothing. What am I doing wrong? Below is the code that works for the desktop - and the mobile w/o out the hamburger.

<style>

  .header-nav-item:nth-child( 2 ) {
      display : none;
        }
  .header-nav-item:nth-child( 4 ) {
      display : none;
        }
  .header-nav-item:nth-child( 6 ) {
      display : none;
        }
  .header-nav-item:nth-child( 8 ) {
      display : none;
        }
  .header-nav-item:nth-child( 10 ) {
      display : none;
        }
  .header-nav-item:nth-child( 12 ) {
      display : none;
        }
  </style

2 hours ago, ggoodno said:

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

 

Hello!
I have a need to hide certain menu links on different pages. I used the following code to achieve that on the desktop site. Everything works great! Though I also need to code the mobile page's hamburger to react the same way. My current workaround it to remove the hamburger and display the links. It's functional, but not good for style or functionality.

I had hoped some form of this script would work -  
But unfortunately, it does absolutely nothing. What am I doing wrong? Below is the code that works for the desktop - and the mobile w/o out the hamburger.

<style>

  .header-nav-item:nth-child( 2 ) {
      display : none;
        }
  .header-nav-item:nth-child( 4 ) {
      display : none;
        }
  .header-nav-item:nth-child( 6 ) {
      display : none;
        }
  .header-nav-item:nth-child( 8 ) {
      display : none;
        }
  .header-nav-item:nth-child( 10 ) {
      display : none;
        }
  .header-nav-item:nth-child( 12 ) {
      display : none;
        }
  </style

I still do not know which one you want to hide

On 7/29/2022 at 2:08 AM, ggoodno said:

@tuanphan and @CoveLE did you ever get an answer about hiding elements on the mobile menu? I sure could use that guidance.

thank you!

George

Hi. Which items you want to hide?

Thank you @tuanphan. As you can see in the drop down image below, I will have two versions of the same page accessible depending upon the user being in North America or not. Therefore, I will want to hide the second version of each identical link below. 

Thank you.

Thank you @bangank36. As you can see in the drop down image below, I will have two versions of the same page accessible depending upon the user being in North America or not. Therefore, I will want to hide the second version of each identical link below. 

Thank you.

I will customize the code for each page to hide the appropriate links.

12 minutes ago, ggoodno said:

Thank you @bangank36. As you can see in the drop down image below, I will have two versions of the same page accessible depending upon the user being in North America or not. Therefore, I will want to hide the second version of each identical link below. 

 

Thank you.

Try adding to Home > Design > Custom Css

/*hide even menus*/
.header-menu-nav-folder-content > .header-menu-nav-item:nth-child(even) {
  display: none;
}

/*hide odd menus*/
.header-menu-nav-folder-content > .header-menu-nav-item:nth-child(odd) {
  display: none;
}

Thank you @bangank36- that did not work. I think i need to customize each page's header code injection. 

I am using 7.1 Commerce plan. 

Your help is appreciated!

ThanksI have a need to hide certain items from the mobile hamburger menu, as I hide them from the desktop view. However the code to hide from desktop doesn't currently translate to mobile.  Could you help me fix this? I'm using 7.1.

The pages that need to be hidden are currently turned off but will be turned online soon. Here's the website:  https://www.covidlonghaulers.com/

Heres' the code I'm using to turn off some links in the desktop:
 

<style>
  .header-nav-item:nth-child( 1 ) {
      display : none;
        }
  .header-nav-item:nth-child( 3 ) {
      display : none;
        }
  .header-nav-item:nth-child( 5 ) {
      display : none;
        }
  .header-nav-item:nth-child( 7 ) {
      display : none;
        }
  .header-nav-item:nth-child( 9 ) {
      display : none;
        }
  .header-nav-item:nth-child( 11 ) {
      display : none;
        }

   
  </style>

Thank you!

@tuanphan any help you can offer will be so appreciated. I am driving myself nuts trying to get this.

Thanks.

On 8/3/2022 at 2:17 AM, ggoodno said:

ThanksI have a need to hide certain items from the mobile hamburger menu, as I hide them from the desktop view. However the code to hide from desktop doesn't currently translate to mobile.  Could you help me fix this? I'm using 7.1.

The pages that need to be hidden are currently turned off but will be turned online soon. Here's the website:  https://www.covidlonghaulers.com/

Heres' the code I'm using to turn off some links in the desktop:
 

<style>
  .header-nav-item:nth-child( 1 ) {
      display : none;
        }
  .header-nav-item:nth-child( 3 ) {
      display : none;
        }
  .header-nav-item:nth-child( 5 ) {
      display : none;
        }
  .header-nav-item:nth-child( 7 ) {
      display : none;
        }
  .header-nav-item:nth-child( 9 ) {
      display : none;
        }
  .header-nav-item:nth-child( 11 ) {
      display : none;
        }

   
  </style>

 

Thank you!

 

Which items you want to hide on burger menu?

Thank for your reply @tuanphan!

I want to hide the exact same ones from the burger that I have listed above. In this case, it would be the odd numbered links - 1, 3, 5, 7, 9, 11

George

On 8/4/2022 at 3:11 AM, ggoodno said:

@tuanphan any help you can offer will be so appreciated. I am driving myself nuts trying to get this.

 

Thanks.

Mobile needs some code like this

<style>
  .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(1) {
    display: none;
}
</style>

(this will hide first item)

17 hours ago, ggoodno said:

Thank for your reply @tuanphan!

I want to hide the exact same ones from the burger that I have listed above. In this case, it would be the odd numbered links - 1, 3, 5, 7, 9, 11

George

Just answered this question on some of your other posts. You can check it.