css - Hide pages from the main menu

admin管理员组

文章数量:1026222

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

Share Improve this question asked Mar 23, 2017 at 10:10 Nazar AbubakerNazar Abubaker 16311 gold badge22 silver badges77 bronze badges 3

• 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

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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)

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

Share Improve this question asked Mar 23, 2017 at 10:10 Nazar AbubakerNazar Abubaker 16311 gold badge22 silver badges77 bronze badges 3

• 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

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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)

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

本文标签： cssHide pages from the main menu