Archived topic
How to have different MENU COLORS for logged-in users
5 replies · Started by Martin on February 6, 2020
Hi,
I run a membership website, and it would be very useful if I could set a different color scheme for the menu when the user is logged in. It would be an visual reference for the user to know when he is properly logged-in or logged-out.
How can I achieve this with Generatepress (I have the Premium version).
Thank you.
Martin
Hi there,
Can you check if there is a unique class in the <body> tag when a user is logged in?
This post offers a little more insight in order to make this happen.
https://generatepress.com/forums/topic/change-menu-background-color-when-a-user-is-logged-in/
Let me know :)
Finally I found a way to do it. I'm sharing it here in case someone in the future would like to do something similar.
1) Create a CHILD THEME from the used theme
2) In the Child Theme Folder:
A) Edit functions.php, and add this code:
// shortcode to display content for loggedout and loggedin users : shortcodes are [loggedout] [loggedin]
add_shortcode( 'loggedout', 'visitor_check_shortcode' );
function visitor_check_shortcode( $atts, $content = null ) {
if ( ( !is_user_logged_in() && !is_null( $content ) ) || is_feed() )
return do_shortcode($content);
return '';
}
add_shortcode( 'loggedin', 'member_check_shortcode' );
function member_check_shortcode( $atts, $content = null ) {
if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
return do_shortcode($content);
return '';
}
B) Copy the file header.php from your theme to the child theme.
Then edit header.php:
Add the following in the top of the header.php file, somewhere before <body>:
<!-- CUSTOM MENU CSS IF USER IS LOGGED-IN (USE COLORS OF YOUR CHOICE)-->
<?php
if ( is_user_logged_in() ) {
echo '
<style>
.main-navigation, .main-navigation ul ul {background-color: #4c3c2c;}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {background-color: #564132;}
</style>
';
} else {
}
?>
<!-- END CUSTOM MENU CSS IF USER IS LOGGED-IN -->
Glad you've figured out :)
I have found a second option, which I think is better because it only involves modifying the functions.php, this way it doesn't interfere with future updates of the theme:
In the CHILD folder, edit functions.php
add this code:
// LOGGED-IN USERS : LOAD THIS CSS
if ( is_user_logged_in() ) {
add_action('wp_enqueue_scripts', 'enqueue_extra_styles', PHP_INT_MAX);
function enqueue_extra_styles() {
wp_enqueue_style('loggedin', get_stylesheet_directory_uri().'/loggedin.css');
}
}
Then, create a file called loggedin.css, add the following css code in the file, and upload it in the child theme folder (NOTE: use your preferred colors):
/* GeneratePress LOGGED-IN CSS */
.main-navigation, .main-navigation ul ul {background-color: #4c3c2c!important;}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {background-color: #3b2d22!important;}
That's it!
Thanks again for your answers.
Awesome.
Thanks for sharing the solutions!
