Responsive Menu for Logged In Users

I have a responsive menu that shows and hides menu items based on the user's login status. It's built from this CSS, and the logged-in and logged-out classes are set per menu item in the Wordpress menu:

/* Menu items viewable by login status
--------------------------------------------- */
.genesis-nav-menu li.logged-in {
	display: none;
}
body.logged-in .genesis-nav-menu li.logged-in {
	display: inline-block;
}
body.logged-in .genesis-nav-menu li.logged-out {
	display: none;
}

It works great on desktop but shows all items on mobile. Can you suggest additional CSS (something like '@media only screen') to make this work on mobile? I'm a CSS noob. Thanks in advance.

  • Adam Czajczyk

    Hello Burlington Avenue,

    I hope you're well today!

    I think there might be some additional rules needed for menus on mobile. Themes often display either completely separate menu for mobile views or use other/additional classes. I'd be more than happy to assist you with this but I'd need to see the site first to be able to inspect its source code.

    Since you didn't assign any site of yours to this thread, could you please point me to the one in question? An URL of the site should suffice :slight_smile:

    Best regards,
    Adam

  • Dimitris

    Hey there Burlington Avenue,

    hope you're doing good and don't mind chiming in here! :slight_smile:

    Could you please try to add the following CSS rules and see how that goes?

    @media only screen and (max-width: 768px) {
      .genesis-nav-menu li.logged-in {
        display: none !important;
      }
      body.logged-in .genesis-nav-menu li.logged-in {
        display: inline-block !important;
      }
      body.logged-in .genesis-nav-menu li.logged-out {
        display: none !important;
      }
    }

    If this still troubles you, please grant us with temporary support access to your website via WPMUDEV Dashboard plugin as described in next link (no need to share credentials):
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-4

    Warm regards,
    Dimitris

  • Burlington Avenue

    Very kind, Dimitris. Sorry, I just noticed we have a whole additional section covering responsive menus:

    /* Responsive Menu
    --------------------------------------------- */
    .responsive-menu-icon {
    	cursor: pointer;
    	display: none;
    	margin-bottom: -1px;
    	text-align: center;
    }
    .responsive-menu-icon::before {
    	content: "\f333";
    	display: inline-block;
    	font: normal 20px/1 'dashicons';
    	margin: 0 auto;
    	padding: 10px;
    }
    .nav-primary .responsive-menu-icon::before {
    	color: #fff;
    }
    
    @media only screen and (max-width: 768px) {
    	.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
    	.genesis-nav-menu.responsive-menu {
    		display: none;
    	}
    	.genesis-nav-menu.responsive-menu .menu-item,
    	.responsive-menu-icon {
    		display: block;
    	}
    	.genesis-nav-menu.responsive-menu .menu-item {
    		margin: 0;
    	}
    	.genesis-nav-menu.responsive-menu .menu-item:hover {
    		position: static;
    	}
    	.genesis-nav-menu.responsive-menu .current-menu-item > a,
    	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
    	.genesis-nav-menu.responsive-menu a,
    	.genesis-nav-menu.responsive-menu a:hover {
    		background: none;
    		line-height: 1;
    		padding: 16px 20px;
    	}
    	.nav-primary .genesis-nav-menu.responsive-menu .current-menu-item > a,
    	.nav-primary .genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
    	.nav-primary .genesis-nav-menu.responsive-menu a,
    	.nav-primary .genesis-nav-menu.responsive-menu a:hover {
    		color: #fff;
    	}
    	.genesis-nav-menu.responsive-menu .menu-item-has-children {
    		cursor: pointer;
    	}
    	.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
    		margin-right: 60px;
    	}
    	.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
    		content: "\f347";
    		float: right;
    		font: normal 16px/1 'dashicons';
    		height: 16px;
    		padding: 16px 20px;
    		right: 0;
    		text-align: right;
    		z-index: 9999;
    	}
    	.nav-primary .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
    		color: #fff;
    	}
    	.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
    		content: "\f343";
    	}
    	.genesis-nav-menu.responsive-menu .sub-menu {
    		border: none;
    		left: auto;
    		opacity: 1;
    		padding-left: 25px;
    		position: relative;
    		-moz-transition:    opacity .4s ease-in-out;
    		-ms-transition:     opacity .4s ease-in-out;
    		-o-transition:      opacity .4s ease-in-out;
    		-webkit-transition: opacity .4s ease-in-out;
    		transition:         opacity .4s ease-in-out;
    		width: 100%;
    		z-index: 99;
    	}
    	.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
    		margin: 0;
    	}
    	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
    	.genesis-nav-menu.responsive-menu .sub-menu li a,
    	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
    		background: none;
    		border: none;
    		padding: 12px 20px;
    		position: relative;
    		width: 100%;
    	}
    }

    How do I integrate your CSS with this?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.