[Resolved] Hide menu items on one page

[Katrin]

Hey,

is it possible to show only one menu item out of the main menu on one specific page?

All the other pages should show all menu items of the main menu (primary menu) but on one page I wanna reduce it to only login. Or would it be easier to some how make a new menu with that menu item for this page?

Thanks!
Katrin

[Katrin]

Oh, maybe I wanna add a menu item “register” aswell. Do I need an other solution than?

[David]

Hi there,

Easiest method that will save a lot of time if you want to add/remove items is this plugin:

https://en-gb.wordpress.org/plugins/conditional-menus/

[Katrin]

Hey David,

thanks! Is that the most lightweight solution? Or would it be better using a code instead of a plugin in terms of page speed etc.?

[David]

You’re alternative is to add some CSS Classes to your menu items. This article explains how:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

For example give your Login and Register links a CSS class of: register

Now get the ID of the Page you want to show only the Register / Login items.
You can get its Page ID from the editor URL. eg. 55.

This CSS will hide all navigation items apart from those with a Class of register on page ID 55:

.page-id-55 .main-navigation li:not(.register) {
    display: none;
}

[Katrin]

This works perfectly, thank you so much!!

Now I’m trying to figure out, if I can fix the page height to the exact height of the screen. I have to GenerateBlocks Containers as a content. First on should be more or less in the middle and the second one should be on the bottom of the screen.

I tried your code from here: #1554981

.page-id-963 .inside-article{
		min-height: calc(100vh - 123.33px);
}

It doesn’t work for me. I added the page in the private info.

Is it possible to do that with css?

Thank you David!

[David]

Bit trickier than that – try this:

.page-id-963 .entry-content {
    min-height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
}
.page-id-963 .entry-content div:first-child {
    flex: 1;
}
@media(max-width: 768px) {
    .page-id-963 .entry-content {
        min-height: calc(100vh - 54px);
    }
}

[Katrin]

I added the code, but nothing changed.

[David]

Theres an unnecessary } just before your /*fixed page height for quote page*/ CSS. Remove that as its stopping any CSS after it from being executed.

[Katrin]

Sorry, for that unnecessary fault!! Now it works great 🙂 Thank you!

I’m wondering if there is an easy way to put the first container always vertical centered. Now I’m trying to find a middle way for different screen sizes with some padding. But if that’s too much effort, just leave it!

Thank you anyway for all your help here!

[Leo]

Sorry is the original topic of hiding menu items resolved?

If so can you open a new topic for the separate questions?

It’s easier for us to help this way.

Thanks!

[Author]

Posts