[Resolved] Display off canva menu for logged-in users and normal menu for logged-out users

Home Forums Support [Resolved] Display off canva menu for logged-in users and normal menu for logged-out users

Home Forums Support Display off canva menu for logged-in users and normal menu for logged-out users

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #945946
    Andrew

    Hi,

    I have created a function displaying the right menu depending if the user is logged-in or not and if he’s using mobile or computer. What I would like to achieve for my mobile users is that if the user is logged-in he sees an off canva menu, but if he’s logged out he sees a normal menu.

    I believe there’s two ways to achieve this:
    1. Set off canva to off and somehow add off canva menu for logged-in users (see line ADD OFF CANVA HERE)
    2. Set off canva to mobile only and somehow remove off canva menus for logged-out users (see line REMOVE OFF CANVA HERE)

    Please see my code below and let me know whether this is achievable or not and if so, which is the easiest way of the two mentioned above (I don’t have any preference here).

    
    // Display right menu depending on logged in, logged out, mobile and desktop
    function edf_display_right_menu ( $args = '' ) {
    	if ($args['theme_location'] == 'primary') {
    		if( is_user_logged_in() ) { 
    			if(wp_is_mobile()) {
    				$args['menu'] = 'MobileLoggedIn'; // <== ADD OFF CANVA HERE
    			} else {
    				$args['menu'] = 'DesktopLoggedIn';
    			}
    		} else {
    			$args['menu'] = 'LoggedOut'; // <== REMOVE OFF CANVA HERE
    		}
    	}	
    	return $args;
    }
    add_filter( 'wp_nav_menu_args', 'edf_display_right_menu' );
    

    Thanks for your help
    Best regards,

    #946252
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This might be possible with CSS. Set the Off Canvas Panel to mobile only, then try this:

    body:not(.logged-in) #generate-slideout-menu, 
    body:not(.logged-in) .slideout-overlay {
      display: none;
    }
    
    body:not(.logged-in).slideout-mobile .main-navigation.toggled .main-nav > ul {
      display: block !important;
    }
    #946436
    Andrew

    Hi Tom,

    Thanks for your input.
    I’ve tested several ways with the CSS code you’ve provided (with and without a menu set as off canva) and unfortunately it’s not quite working.

    It always shows the same type of menu whether you’re connected or not (either both are off canva, or none is). Would there be another tweak that would do the trick?

    Best regards

    #946589
    Tom
    Lead Developer
    Lead Developer

    Is your off canvas panel set to mobile only?

    The above should make it so the off canvas panel only displays to logged in users. If you’re not logged in, the regular mobile menu should show.

    #947126
    Andrew

    Hi Tom,

    Yes it is set to mobile only and doesn’t work.
    This is my current setup:

    Off Canva
    Off Canvas Panel: Mobile only
    Style: Overlay
    Menu Item Height: empty

    Menu
    Off Canvas Menu set to MobileLoggedIn

    CSS

    
    body:not(.is-user-logged-in) #generate-slideout-menu,
    body:not(.is-user-logged-in) .slideout-overlay {
      display: none;
    }
    
    body:not(.is-user-logged-in).slideout-mobile .main-navigation.toggled .main-nav > ul {
      display: block !important;
    }
    

    Is there anything I’m doing wrong?

    Thanks again for your help

    #947201
    Tom
    Lead Developer
    Lead Developer
    #947286
    Andrew

    Hi Tom,

    You made my day ๐Ÿ™‚
    Working perfectly this time, thank you so much!

    #947459
    Tom
    Lead Developer
    Lead Developer

    You’re welcome ๐Ÿ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.