How to hide specific navigation items on 7.0?

Site URL: https://www.musaparadisiaca.net/about

Hi there. I am aware that this is a common issue, even though, I couldn't find any CSS solution to it concerning version 7.0. I know the solution for version 7.1 but, that version comes with different issues concerning customisation. Could someone please help me with a CSS solution for hiding specific navigation items with the purpose of creating a bilingual website? It is absurd that this option is no longer available on styles from scratch. Thanks a lot for your time! 

Hi. To hide an item, use this CSS

/* hide knows item */
div.nav-item [href="/places"] {
    display: none;
}

Thanks a lot for your help!

This solution is perfect for hiding items permanently. Although, in my case, I am searching for an option to hide specific items on specific pages. I am building the navigation bar with all the links for the two different languages, as so, I would need to hide the links on language A when opening pages on language B, as so on. Could you please help with that too?

I have used the code you kindly provided to make some test. And it worked, the nav items are now only shown when they are needed. My only remaining issue is the blank space the hidden items seem to occupy in the nav bar, pushing all the visible items to the left. This creates justification problems to the nav bar as a whole. Do you have any idea on how to solve this? Thanks a lot in advance.

Dear @tuanphan,

It seems, after all, that all the hidden items are always there occupying blank space and forcing the visible items to the left or right, depending on the order of the main navigation items' insertion. 

On 3/2/2021 at 7:18 PM, MiguelFerrao said:

Dear @tuanphan,

It seems, after all, that all the hidden items are always there occupying blank space and forcing the visible items to the left or right, depending on the order of the main navigation items' insertion. 

Hi. Do you still need help on this?

Hi @tuanphan! I couldn't find any solution to 7.0 version, unfortunately.

22 hours ago, MiguelFerrao said:

Hi @tuanphan! I couldn't find any solution to 7.0 version, unfortunately.

You can target :nth-child

with when item, use this new code

nav.site-navigation>div:nth-child(4) {
    display: none !important;
}
nav.mobile-primary-nav-links>div:nth-child(4) {
    display: none;
}