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
    • Support Gorilla

    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
    • Support Star

    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
    • Site Builder, Child of Zeus

    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?

  • Adam Czajczyk
    • Support Gorilla

    Hello Burlington Avenue!

    How do I integrate your CSS with this?

    Simply add code suggested by Dimitris into your child-themes style.css or the way you added the previous code, preferably at the very end of any already existing CSS. There's no need to "merge it into" existing code and it shouldn't interfere.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.