Hide a Menu Item on Login

Question

I am using the following code to hide a menu item when a customer is not logged and show it when a customer is logged in.

.hide-item-not-login{
display: none !important;
}

.logged-in .hide-item-not-login{
display: block !important;
}

I applied the class hide-item-not-login to my menu item and it works fine.

What I actually want is the opposite. I want the menu item to hide when user logs in and show up when the user (cutsomer in woocommerce) is not logged in.

What changes are suggested? Any help is highly appreciated.

Answer 1

Can't you change CSS rules?

.hide-item-not-login{
    display: block !important;
}

.logged-in .hide-item-not-login{
    display: none !important;
}

EDIT

To add login/logout menu item, you will need to add one more class to logout menu item. Let's say you added class .logout-link to logout menu item. Then you can add css like this.

.hide-item-not-login{
    display: block !important;
}

.logged-in .hide-item-not-login{
    display: none !important;
}

.logout-link{
    display: none !important;
}

.logged-in .logout-link{
    display: block !important;
}

Answer 2

This can be done by having the display: none; only on the .logged-in selector. Like this...

.logged-in .hide-item-not-login {
    display: none;
}

You might want to change that .hide-item-not-login to a more accurate .hide-item-login or something to make it more clear for this changed use case. Though it makes no difference to the functionality of it.