🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] How to have different MENU COLORS for logged-in users

Home Forums Support How to have different MENU COLORS for logged-in users

  • This topic has 5 replies, 2 voices, and was last updated 5 months ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1157135
    Martin

    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

    #1157172
    Leo
    Staff
    Customer Support

    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 🙂

    #1157809
    Martin

    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 –>

    #1158113
    Leo
    Staff
    Customer Support

    Glad you’ve figured out 🙂

    #1158147
    Martin

    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.

    #1158197
    Leo
    Staff
    Customer Support

    Awesome.

    Thanks for sharing the solutions!

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