Hide Content For Logged In/Logged Out Status Using CSS

Add one or both CSS snippets to your website and the relevant CSS class (‘hide-from-logged-out’ or ‘hide-from-logged-in’) to any elements you wish to hide.

For example, let’s say we wanted to hide a ‘Vendor Registration’ WordPress menu item from logged-out users.

1. WordPress Dashboard > Appearance > Menus.
2. Screen Options > Tick the box for ‘CSS Classes’.
3. Edit the WordPress menu that contains the ‘Vendor Registration’ menu item.
4. Expand the menu item.
5. Add ‘hideifloggedout’ to the ‘CSS Classes’ box.
6. Save your menu.
7. To test, refresh your website while you are not logged in.

Hide If Logged Out

body:not(.logged-in) .hideifloggedout {
    display: none !important;
}

Hide If Logged In

.logged-in .hideifloggedin {
    display: none !important;
}