Jump to content

Removing 2 items from a nav on a specific page

Recommended Posts

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 by creedon
version 3 of CSS, less verbose id selector

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

Link to comment
  • 3 months later...

@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 best , and see my profile. Thanks for your support!

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

@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 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
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!!

Link to comment
  • 3 weeks later...

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

@emmawhyte

I'm assuming 'Bespoke', 'Press', 'The Process', 'My Mission' & 'Contact Me' are all Link Pages.

29352947_ScreenShot2021-01-26at11_15_25AM.png.8e5ac8bde75b8f5c01a10aa230a3a3d7.png

Go into each one and add a forward slash at the beginning of the URL Slug.

753160503_ScreenShot2021-01-26at11_19_29AM.png.c20a8faa3f5ef7ced81842792cf67969.png

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.

153827468_ScreenShot2021-01-26at11_26_50AM.png.0c7d4fabae9d39951f3e17c7e60e9315.png

I might have a suggestion for it.

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
1 hour ago, creedon said:

@emmawhyte

I'm assuming 'Bespoke', 'Press', 'The Process', 'My Mission' & 'Contact Me' are all Link Pages.

29352947_ScreenShot2021-01-26at11_15_25AM.png.8e5ac8bde75b8f5c01a10aa230a3a3d7.png

Go into each one and add a forward slash at the beginning of the URL Slug.

753160503_ScreenShot2021-01-26at11_19_29AM.png.c20a8faa3f5ef7ced81842792cf67969.png

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.

153827468_ScreenShot2021-01-26at11_26_50AM.png.0c7d4fabae9d39951f3e17c7e60e9315.png

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

Capture.PNG

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

@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 best , and see my profile. Thanks for your support!

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

@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 best , and see my profile. Thanks for your support!

Link to comment
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
  • 1 year later...

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!

 

Xnip2023-02-17_17-30-05.png

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

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

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.