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

[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

[Fernando]

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!

[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

[Fernando]

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.

[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😊

[Fernando]

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! 😊

[Gerrit]

That is perfect, thank you for your help😊

[Fernando]

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

[Eva Maria]

Fernando, can I ask a complementary question please? I would like to add a calendar icon next to the menu burger, but only so on the secondary (mobile menu), which I in fact use for both mobile devices and iPads. When following your suggested advice above, I get the icon also on the primary menu for desktops, which is not what I want. I tried several of the other hooks for mobile, but to no avail. Thanks for your help.

Regards,
Thomas

[David]

Hi there,

there are 2 hooks:

before the Hamburger: generate_inside_secondary_navigation
after the Hamnburger: generate_after_secondary_mobile_menu_button

may need some CSS to position and hide on desktop. Let me know if that works.

[Author]

Posts