Smoore1271 Posted September 30, 2020 Share Posted September 30, 2020 Site URL: https://www.cranburyprofessionalservices.com/about-us Hi, I am trying to remove just the services and about section from this page only. I was able to remove the entire navigation, but I can't figure out how to remove just two sections. Thanks! Shannon Link to comment
creedon Posted September 30, 2020 Share Posted September 30, 2020 (edited) If you are on the business plan or above put the following in Page Settings > Advanced > PAGE HEADER CODE INJECTION. <style> /* desktop */ .header-nav-item:nth-of-type( 2 ), /* services */ .header-nav-item:nth-of-type( 3 ), /* about */ /* mobile */ .header-menu-nav-item:nth-of-type( 2 ), /* services */ .header-menu-nav-item:nth-of-type( 3 ) /* about */  {  display: none;  } </style> If not then put the following in Design > Custom CSS. /* desktop */ #collection-5f73bceb31179576b5d4cfde .header-nav-item:nth-of-type( 2 ), /* services */ #collection-5f73bceb31179576b5d4cfde .header-nav-item:nth-of-type( 3 ), /* about */ /* mobile */ #collection-5f73bceb31179576b5d4cfde .header-menu-nav-item:nth-of-type( 2 ), /* services */ #collection-5f73bceb31179576b5d4cfde .header-menu-nav-item:nth-of-type( 3 ) /* about */  {  display: none;  } The downside to these two methods is that we are hiding menu items based on position. As soon as the menu structure changes order, we need to update the CSS. If you want to get fancy then a little jQuery could help us target links by their href attributes. Let us know if that is something you want to pursue. Let us know how it goes. Edited January 5, 2021 by creedon version 3 of CSS, less verbose id selector Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Smoore1271 Posted September 30, 2020 Author Share Posted September 30, 2020 This worked!Thank you so much!! creedon 1 Link to comment
Smoore1271 Posted October 1, 2020 Author Share Posted October 1, 2020 Is there a way to do the same in the mobile menu?? Link to comment
creedon Posted October 1, 2020 Share Posted October 1, 2020 8 hours ago, Smoore1271 said: Is there a way to do the same in the mobile menu? Updated CSS in previous post. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Smoore1271 Posted October 1, 2020 Author Share Posted October 1, 2020 That worked!! Thank you again 🙂 creedon 1 Link to comment
salondaome Posted January 5, 2021 Share Posted January 5, 2021 (edited) hi @creedon, I'm trying to do the opposite version of this on my site - I want to add a navigation menu item that only appears on product-specific pages only (eg. https://www.leaporbit.com/convergent-home). Any chance you can advise on how to do so? Edited January 5, 2021 by salondaome Link to comment
creedon Posted January 5, 2021 Share Posted January 5, 2021 @salondaome This should not be too hard. In general you would add all the links in the position where you want them in the navigation menu. Then with CSS we would hide them by default and only turn on the ones you want when on particular pages. Without having the links in the nav menu, knowing which ones they are and knowing which ones need to be turned on for which pages then it is hard to be more specific. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
salondaome Posted January 5, 2021 Share Posted January 5, 2021 21 minutes ago, creedon said: @salondaome This should not be too hard. In general you would add all the links in the position where you want them in the navigation menu. Then with CSS we would hide them by default and only turn on the ones you want when on particular pages. Without having the links in the nav menu, knowing which ones they are and knowing which ones need to be turned on for which pages then it is hard to be more specific. I see! I can't add that extra link to the menu right now since it would be live on the site. But let's say I were to add it ("Documentation") to the right of "Contact". What code would I need to use to hide it on the example page (https://www.leaporbit.com/convergent-home)? And where would the code go? Do I need to add the link on the live site before the code can be generated? Link to comment
creedon Posted January 5, 2021 Share Posted January 5, 2021 (edited) @salondaome You gave me enough to come up with an example but without being able to work with the actual elements on your site I don't know if it will work for sure. Add the following to Design > Custom CSS. /* order is important */ /* begin hide documentation navigation item */  /* desktop */    .header-nav-item:nth-of-type( 8 ),    /* mobile */    .header-menu-nav-item:nth-of-type( 8 )     {       display: none;        }      /* end hide documentation navigation item */ /* begin show documentation navigation item on convergent page */  /* desktop */    #collection-5fb3f2d539ca382c2f01c28a .header-nav-item:nth-of-type( 8 ),    /* mobile */    #collection-5fb3f2d539ca382c2f01c28a .header-menu-nav-item:nth-of-type( 8 )     {       display: block;        }      /* end show documentation navigation item on convergent page */ Alternately if you are on the business plan or above you can do the following. Add the following to Design > Custom CSS. /* begin hide documentation navigation item */  /* desktop */    .header-nav-item:nth-of-type( 8 ),    /* mobile */    .header-menu-nav-item:nth-of-type( 8 )     {       display: none;        }      /* end hide documentation navigation item */ Add the following to Page Settings > Advanced > Page Header Code Injection for the Convergent page. <style>  /* begin show documentation navigation item */     /* desktop */      .header-nav-item:nth-of-type( 8 ),      /* mobile */      .header-menu-nav-item:nth-of-type( 8 )       {         display: block;          }        /* end show documentation navigation item */     </style> Now with the code installed you should be able to add the Documentation link and it shouldn't show until you're on the Convergent page. If it doesn't work then move the nav link down into the Not Linked area. Let us know how it goes. Edited September 5, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
salondaome Posted January 6, 2021 Share Posted January 6, 2021 19 hours ago, creedon said: @salondaome You gave me enough to come up with an example but without begin able to work with the actual elements on your site I don't know if it will work for sure. Add the following to Design > Custom CSS. /* order is important */ /* begin hide documentation navigation item */  /* desktop */    .header-nav-item:nth-of-type( 8 ),    /* mobile */    .header-menu-nav-item:nth-of-type( 8 )     {       display: none;        }      /* end hide documentation navigation item */ /* begin show documentation navigation item on convergent page */  /* desktop */    #collection-5fb3f2d539ca382c2f01c28a .header-nav-item:nth-of-type( 8 ),    /* mobile */    #collection-5fb3f2d539ca382c2f01c28a .header-menu-nav-item:nth-of-type( 8 )     {       display: block;        }      /* end show documentation navigation item on convergent page */ Alternately if you are on the business plan or above you can do the following. Add the following to Design > Custom CSS. /* begin hide documentation navigation item */  /* desktop */    .header-nav-item:nth-of-type( 8 ),    /* mobile */    .header-menu-nav-item:nth-of-type( 8 )     {       display: none;        }      /* end hide documentation navigation item */ Add the following to Page Settings > Advanced > Page Header Code Injection for the Convergent page. <style>  /* begin show documentation navigation item */     /* desktop */      .header-nav-item:nth-of-type( 8 ),      /* mobile */      .header-menu-nav-item:nth-of-type( 8 )       {         display: block;          }        /* end show documentation navigation item */     </style> Now with the code installed you should be able to add the Documentation link and it shouldn't show until you're on the Convergent page. If it doesn't work then move the nav link down into the Not Linked area. Let us know how it goes. This worked perfectly. Thank you so much for your help!! creedon 1 Link to comment
emmawhyte Posted January 25, 2021 Share Posted January 25, 2021 Hi there, @creedon I have been trying to implement your code into my site to remove some of my primary navigation links but aren't having any success, do you think you may be able to help? I am using the Sofia template and have implemented some smooth scrolling on my home page by setting up links in my nav bar that then scroll to sections on my page. So for example I have a 'Contact Us' section and in my primary navigation I have included a link titled ' Contact Us' with the link being '#contact-us' and this smooth scrolling works very well. However I also now have a shop page which I have included as a separate page so now my section links that I have in my nav bar don't work as its on a new page, so I would like to remove them just on my shop page. I have followed your advice above but haven't had any luck. Any help would be really appreciated. Thanks  Link to comment
creedon Posted January 26, 2021 Share Posted January 26, 2021 @emmawhyte Please post the URL for your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
emmawhyte Posted January 26, 2021 Share Posted January 26, 2021 14 hours ago, creedon said: @emmawhyte Please post the URL for your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue. @creedon https://www.emmawhyte.co.uk/welcome - The URL So in my primary navigation I originally had 'Bespoke', 'Press', 'The Process', 'My Mission' & 'Contact Me' I then added my shop page and it was when I set that up that I realized my links that I had set up no longer worked, so I then added 'Home'. I'm hoping to be able to find a way to get the original navigation items to work and keep the smooth scrolling, or find a way to hide them so that the user just goes back to 'Home' and doesn't get confused by the links that won't work on the shop page. Thanks Link to comment
creedon Posted January 26, 2021 Share Posted January 26, 2021 (edited) @emmawhyte I'm assuming 'Bespoke', 'Press', 'The Process', 'My Mission' & 'Contact Me' are all Link Pages. Go into each one and add a forward slash at the beginning of the URL Slug. Be sure to SAVE. The forward slash says go to the root of the site and then go to the url fragment. Whereas now they say on the current page go to the url fragment. It works on the home page/welcome page because that page is also the root page of the site. When you go to any other page, it breaks. There is something a little odd about your welcome/home page link. Could you post a pic of your Pages section? It's working but in an atypical fashion. I might have a suggestion for it. Let us know how it goes. Edited September 6, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
emmawhyte Posted January 26, 2021 Share Posted January 26, 2021 1 hour ago, creedon said: @emmawhyte I'm assuming 'Bespoke', 'Press', 'The Process', 'My Mission' & 'Contact Me' are all Link Pages. Go into each one and add a forward slash at the beginning of the URL Slug. Be sure to SAVE. The forward slash says go to the root of the site and then go to the url fragment. Whereas now they saw on the current page go to the url fragment. It works on the home page/welcome page because that page is also the root page of the site. When you go to any other page, it breaks. There is something a little odd about your welcome/home page link. Could you post a pic of your Pages section? It's working but in an atypical fashion. I might have a suggestion for it. Let us know how it goes. @creedon Thank you so much for your advice regarding the navigation items! It worked!!! Beyond happy! I will probably remove 'home' from the navigation now as it is not needed but below is the screenshot you mentioned! Thanks creedon 1 Link to comment
creedon Posted January 26, 2021 Share Posted January 26, 2021 2 minutes ago, emmawhyte said: I will probably remove 'home' from the navigation now as it is not needed Ah then ignore what I said about the odd link! 😀 emmawhyte 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
WillDuro Posted September 5, 2021 Share Posted September 5, 2021 On 9/30/2020 at 8:25 AM, creedon said: If you are on the business plan or above put the following in Page Settings > Advanced > PAGE HEADER CODE INJECTION. <style> /* desktop */ .header-nav-item:nth-of-type( 2 ), /* services */ .header-nav-item:nth-of-type( 3 ), /* about */ /* mobile */ .header-menu-nav-item:nth-of-type( 2 ), /* services */ .header-menu-nav-item:nth-of-type( 3 ) /* about */  {  display: none;  } </style> If not then put the following in Design > Custom CSS. /* desktop */ #collection-5f73bceb31179576b5d4cfde .header-nav-item:nth-of-type( 2 ), /* services */ #collection-5f73bceb31179576b5d4cfde .header-nav-item:nth-of-type( 3 ), /* about */ /* mobile */ #collection-5f73bceb31179576b5d4cfde .header-menu-nav-item:nth-of-type( 2 ), /* services */ #collection-5f73bceb31179576b5d4cfde .header-menu-nav-item:nth-of-type( 3 ) /* about */  {  display: none;  } The downside to these two methods is that we are hiding menu items based on position. As soon as the menu structure changes order, we need to update the CSS. If you want to get fancy then a little jQuery could help us target links by their href attributes. Let us know if that is something you want to pursue. Let us know how it goes. Hey Creedon I have used this coding to hide menus on my header on certain pages, which has worked perfectly. I have a issue with i created a folder with sub menus in it and on the  mobile device the coding hides some of the sub menus in the folder also. Is there a way to get around this?  many thanks Link to comment
creedon Posted September 5, 2021 Share Posted September 5, 2021 @WillDuro Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
WillDuro Posted September 6, 2021 Share Posted September 6, 2021 12 hours ago, creedon said: @WillDuro Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Thankyou, the URL is https://www.willdurocher.com password: Password2021  the issue is, when you go to the site, click on photography, then it will take you to the photography side of the site, when you click on series (on a web browser) it will show a drop down menu of 6 pages, but when you view it on a mobile device it will only show 2.  thanks again Link to comment
creedon Posted September 6, 2021 Share Posted September 6, 2021 @WillDuro Although we can use CSS to manipulate the menus, looking at the structure of your site I think a different approach would work better. If I have the basic structure of your site. It is basically a landing page with two sub-sections. Artist and photography. I think you could benefit from Brad Good's multi-language site code. I discuss it a bit in the following thread. If setting your site up this way sounds of interest I suggest following up in the cited thread or starting a new thread. We don't want to conflate two issues in one thread. If you want to continue with menu hiding CSS let me know. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
WillDuro Posted September 6, 2021 Share Posted September 6, 2021 1 hour ago, creedon said: @WillDuro Although we can use CSS to manipulate the menus, looking at the structure of your site I think a different approach would work better. If I have the basic structure of your site. It is basically a landing page with two sub-sections. Artist and photography. I think you could benefit from Brad Good's multi-language site code. I discuss it a bit in the following thread. If setting your site up this way sounds of interest I suggest following up in the cited thread or starting a new thread. We don't want to conflate two issues in one thread. If you want to continue with menu hiding CSS let me know. thank you, the following thread won't show up on my screen, so ill create a new stream. I would like to try the new approach you think would work better. Link to comment
Claude Posted February 17, 2023 Share Posted February 17, 2023 Hello! I used the code from above to divide my page into 2 areas. In area1Â (pass=schnufe) all nav items from area2 are hidden (and the other way around). My Code for area2Â (pass=schnufe)Â looks like this - inserted with PAGE HEADER CODE INJECTION: <style> /* desktop hide nav items */ .header-nav-item:nth-of-type( 1 ), .header-nav-item:nth-of-type( 2 ), .header-nav-item:nth-of-type( 3 ), .header-nav-item:nth-of-type( 4 ), /* mobile hide nav items */ .header-menu-nav-item:nth-of-type( 1 ), .header-menu-nav-item:nth-of-type( 2 ), .header-menu-nav-item:nth-of-type( 3 ), .header-menu-nav-item:nth-of-type( 4 ) { display: none; } </style> On desktop it works perfectly. On mobile though in area2Â the 4 first submenus (items that are nested in the folder "Angebot") are hidden too including the "back" item. See attached screenshot. Is there any way to only hide main nav items but still display all submenu items? I've read above that "a little jQuery could help us target links by their href attributes". Maybe this would be a better way? Unfortunately i don't know jQuery at all. Help is very much appreciated. Thank you! Â Link to comment
creedon Posted February 17, 2023 Share Posted February 17, 2023 5 hours ago, Claude said: On mobile though in area2 the 4 first submenus (items that are nested in the folder "Angebot") are hidden too including the "back" item. See attached screenshot. Is there any way to only hide main nav items but still display all submenu items? Please see the following. It is a similar more complex version of the above code.  Quote I've read above that "a little jQuery could help us target links by their href attributes". Maybe this would be a better way? Unfortunately i don't know jQuery at all. You can use whichever technique works best for you. The main methods are : The CSS on every page method to control the menus. The Brad Good split site method with JavaScript code. Custom JavaScript which I don't have a specific example of. Claude 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Claude Posted February 17, 2023 Share Posted February 17, 2023 Thank works perfectly. Thank you so much Creedon! creedon 1 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