Archived topic
Display off canva menu for logged-in users and normal menu for logged-out users
7 replies · Started by Andrew on July 1, 2019
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,
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;
}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
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.
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
Hi Tom,
You made my day :)
Working perfectly this time, thank you so much!
You're welcome :)
