Hiding nav menu links for specific pages

Hello,

Please, I would like to hide the nav menu link 2,4 and 7 on the Homepage & link 1,3 & 6 on everyother page.

Can anyone help?

Can you share your website URL?

2 hours ago, Ziggy said:

Can you share your website URL?

This is the homepage - https://www.whiteroan.com/home-1 (Though I've not set it to homepage yet to the public)

Then the other pages are the "Projects" and "Akoya" page. 

6 minutes ago, Ziggy said:

Try this Custom CSS:

// hide links on every page
.header-menu-nav-item:nth-child(1) {display:none;}
.header-menu-nav-item:nth-child(3) {display:none;}
.header-menu-nav-item:nth-child(6) {display:none;}
#collection-65e2265c5a803a43536b24c4 {
  // show links on homepage
  .header-menu-nav-item:nth-child(1) {display:initial;}
  .header-menu-nav-item:nth-child(3) {display:initial;}
  .header-menu-nav-item:nth-child(6) {display:initial;}
  // hide links on homepage
  .header-menu-nav-item:nth-child(2) {display:none;}
  .header-menu-nav-item:nth-child(4) {display:none;}
  .header-menu-nav-item:nth-child(7) {display:none;}
}

 

Thanks Ziggy, it worked except there is now a wide space in the nav menu. Is there a way to fix that?

Strange, try this:

.header-menu-nav-item a {
    margin: 1vw 5vw;
}

28 minutes ago, Ziggy said:

Strange, try this:

.header-menu-nav-item a {
    margin: 1vw 5vw;
}

 

Thank you so much Ziggy, that worked too!

But the mobile menu links are uneven for some reason

It looks like that is because of this CSS you have on your website:

.header-menu-nav-item {
    margin: 50px 0;
}

7 hours ago, Ziggy said:

It looks like that is because of this CSS you have on your website:

.header-menu-nav-item {
    margin: 50px 0;
}

 

Thank you!