[Resolved] Add an user icon next to the hamburger menu

Home Forums Support [Resolved] Add an user icon next to the hamburger menu

Home Forums Support Add an user icon next to the hamburger menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2288063
    Gerrit

    Hoe do I Add an user icon next to the hamburger menu?

    I just like to link it to a login page and would like it to show to the left of the hamburger menu.

    The site is Gerrit.no

    #2288087
    Fernando
    Customer Support

    Hi Gerrit,

    You can create a Hook Element hooked to generate_menu_bar_items with this code:

    <?php 
    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        if ( ($current_user instanceof WP_User) ) {
    			  $account_link = 'ADD ACCOUNT LINK HERE';
            echo '<a href="' . $account_link . '" class=avatar-account-button>' . get_avatar( $current_user->ID, 32 ) . '</a>';
        }
    }
    ?>

    Make sure to enable Execute PHP, and add a display rule.

    You can then modify its layout through CSS.

    Hope this helps!

    #2288108
    Gerrit

    That worked perfect. How do I make it show all the time ( logged I and out, and exactly what css do I use to change the background color?

    Thank you

    #2288116
    Fernando
    Customer Support

    Oh. That’s for logged in users only. Otherwise, there’s no “current user” to get the image from, unless you want to show a static/ the same image for all users.

    For the background color, you can try adding this in Customize > Additional CSS:

    a.avatar-account-button {
        padding: 5px;
        background-color: #ff00ff;
    }

    You may replace #ff00ff with your preferred color.

    Kindly let us know how it goes.

    #2288139
    Gerrit

    I would like to show a static icon for all users, both logged in and out.

    Something similar to this:
    https://fontawesome.com/icons/user?s=solid

    Thank you😊

    #2288155
    Fernando
    Customer Support

    Oh I see. Sorry for the misunderstanding! No code is needed for that.

    You can do so by creating a Block Element – Hook, hooked to menu_bar_items.

    Then, add a Buttons Block, and in the Button Block’s settings, you may add an icon: https://docs.generateblocks.com/article/buttons-overview/#icon

    You can set the url as such: https://docs.generateblocks.com/article/buttons-overview/#button

    Hope this helps! 😊

    #2288174
    Gerrit

    That is perfect, thank you for your help😊

    #2288187
    Fernando
    Customer Support

    You’re welcome Gerrit! Glad to be of assistance! 😊

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