Removing 2 items from a nav on a specific page

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

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.

This worked!Thank you so much!!

Is there a way to do the same in the mobile menu??

8 hours ago, Smoore1271 said:

Is there a way to do the same in the mobile menu?

Updated CSS in previous post.

That worked!! Thank you again 🙂

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?

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

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?

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

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

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

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

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

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

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

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

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

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

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

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

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.

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!

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.

Thank works perfectly. Thank you so much Creedon!