How to hide navigation elements on desktop but show on Mobile

Hello, On the homepage I have "Portraits, Fashion,  Corporate Work & Milestones" in the navigation. I want them to show up on mobile for the hamburger option etc. But I don't want them to be displayed on the desktop version. On the desktop version I only want "Bio & Design" to be on the navigation.

Any help with this would be greatly appreciated. 

1 minute ago, RianW said:

Hello, On the homepage I have "Portraits, Fashion,  Corporate Work & Milestones" in the navigation. I want them to show up on mobile for the hamburger option etc. But I don't want them to be displayed on the desktop version. On the desktop version I only want "Bio & Design" to be on the navigation.

Any help with this would be greatly appreciated. 

Can you share your website URL?

https://rianwatkins.com/

3 minutes ago, Web_Solutions said:

.header-display-desktop .header-nav-list .header-nav-item:nth-child(1n+3) {
  display: none !important;
}

Game changer, thank you very much. 

6 minutes ago, RianW said:

Game changer, thank you very much. 

Welcome!

Love the design of your site @RianW!