ggoodno Posted May 27, 2022 Share Posted May 27, 2022 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! Link to comment
creedon Posted May 27, 2022 Share Posted May 27, 2022 As far as I can tell there are no links in header with that href (url) so the code can not hide it. ggoodno 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
ggoodno Posted May 27, 2022 Author Share Posted May 27, 2022 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 Link to comment
creedon Posted May 27, 2022 Share Posted May 27, 2022 (edited) 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 May 27, 2022 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
ggoodno Posted May 27, 2022 Author Share Posted May 27, 2022 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
creedon Posted May 27, 2022 Share Posted May 27, 2022 (edited) 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 June 11, 2022 by creedon ggoodno 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
ggoodno Posted June 11, 2022 Author Share Posted June 11, 2022 creedo, is it possible to do this same thing with folders? Thanks! Link to comment
creedon Posted June 11, 2022 Share Posted June 11, 2022 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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
CoveLE Posted June 21, 2022 Share Posted June 21, 2022 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? ggoodno 1 Link to comment
tuanphan Posted June 22, 2022 Share Posted June 22, 2022 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
ggoodno Posted July 28, 2022 Author Share Posted July 28, 2022 (edited) @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 Edited July 28, 2022 by ggoodno Link to comment
ggoodno Posted July 29, 2022 Author Share Posted July 29, 2022 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 Link to comment
Beyondspace Posted July 29, 2022 Share Posted July 29, 2022 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 ggoodno 1 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, Lightbox Studio pluginIf 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
tuanphan Posted July 31, 2022 Share Posted July 31, 2022 (edited) 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 July 31, 2022 by tuanphan ggoodno 1 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
ggoodno Posted August 1, 2022 Author Share Posted August 1, 2022 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. Link to comment
ggoodno Posted August 1, 2022 Author Share Posted August 1, 2022 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. Link to comment
ggoodno Posted August 1, 2022 Author Share Posted August 1, 2022 I will customize the code for each page to hide the appropriate links. Link to comment
Beyondspace Posted August 1, 2022 Share Posted August 1, 2022 (edited) 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; } Edited August 1, 2022 by bangank36 ggoodno 1 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, Lightbox Studio pluginIf 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
ggoodno Posted August 1, 2022 Author Share Posted August 1, 2022 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! Link to comment
ggoodno Posted August 2, 2022 Author Share Posted August 2, 2022 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
ggoodno Posted August 3, 2022 Author Share Posted August 3, 2022 @tuanphan any help you can offer will be so appreciated. I am driving myself nuts trying to get this. Thanks. Link to comment
tuanphan Posted August 4, 2022 Share Posted August 4, 2022 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
ggoodno Posted August 4, 2022 Author Share Posted August 4, 2022 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 Link to comment
tuanphan Posted August 5, 2022 Share Posted August 5, 2022 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) JonJonJJ 1 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
tuanphan Posted August 5, 2022 Share Posted August 5, 2022 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. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment