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);
}

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);
}

• menus
• css

• please edit the quest and explain what is this "hiding you are talking about. easiest way is not to include it in the menu – Mark Kaplun Commented Mar 23, 2017 at 11:04
• By doing that, the .menu-item-XXX changes – Nazar Abubaker Commented Mar 23, 2017 at 11:43
• so don't hardcode it – Mark Kaplun Commented Mar 23, 2017 at 11:49

2 Answers 2

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)

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; }