Jump to content

hiding certain links in navigation bar on some pages

Recommended Posts

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:

image.png.5c268e8a2a7b45c1010373d3aa121cd1.png

What am I doing wrong?

 

Thank you!

Link to comment

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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!

 

Link to comment
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>

 

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...
  • 2 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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 - image.png.c7c752fdab9753e6af5ec110b87d4ffa.png 
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

image.png

Link to comment
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 - image.png.c7c752fdab9753e6af5ec110b87d4ffa.png 
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

image.png

I still do not know which one you want to hide

image.png.79ac31cf22905b8fcde54abea0cd09e7.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

thumbnail_Chronic COVID Treatment Center.png

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;
}

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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!

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

757202423_thumbnail_ChronicCOVIDTreatmen

George

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.