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).

My navigation bar

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


.menu-item-346 a {
    text-align: center;
    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 {
    border:1px solid var(--white);

.menu-item-346 a:hover, .menu-item-346 a:active {
  • please edit the quest and explain what is this "hiding you are talking about. easiest way is not to include it in the menu Mar 23, 2017 at 11:04
  • By doing that, the .menu-item-XXX changes Mar 23, 2017 at 11:43
  • so don't hardcode it 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; }
  • I'm looking for a way for my client to be able to turn it on & off without my assistance Mar 23, 2017 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.