Hide pages from the main menu

Question

I was wondering, how do I hide pages from my navbar?

I don't mean hide visibility to private nor do I want to remove the page from appearance -> menus -> MY_MENU (as I have custom CSS on one of the pages).

just for reference, this is what my navbar looks like.

CSS

.menu-item-346 a {
    padding:1em;
    text-align: center;
    display:inline-block;
    text-decoration: none !important;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.menu-item-346 a:link, .menu-item-346 a:visited {
    color:var(--white);
    border:1px solid var(--white);
    background:transparent;
}

.menu-item-346 a:hover, .menu-item-346 a:active {
    color:var(--blue);
    background:var(--white);
}

Answer 1

Instead of writing custom styles like .menu-item-346 where you are hardcoding some styles...

why not just add a custom css class with the editor under Appearance -> Menus.

Wordpress has this build in.
Under Appearance -> Menus you need to open the Screen Options and tick the box CSS Classes. After this you can now add one or multiple classes to every single menu-item.

You than could just write some custom CSS rules for these classes. This way, your customer could just add these classes by himself. (or not)

Answer 2

First you need to check the class of the item that you want to hide. If it's .menu-item-346, just add this to underneath your CSS:

.menu-item-346 { display: none !important; }