- This topic has 9 replies, 4 voices, and was last updated 10 months, 2 weeks ago by
David.
-
AuthorPosts
-
July 19, 2022 at 11:17 pm #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
July 20, 2022 at 12:04 am #2288087Fernando 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!
July 20, 2022 at 12:30 am #2288108Gerrit
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
July 20, 2022 at 12:41 am #2288116Fernando 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.
July 20, 2022 at 1:17 am #2288139Gerrit
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=solidThank you😊
July 20, 2022 at 1:34 am #2288155Fernando 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! 😊
July 20, 2022 at 1:54 am #2288174Gerrit
That is perfect, thank you for your help😊
July 20, 2022 at 2:07 am #2288187Fernando Customer Support
You’re welcome Gerrit! Glad to be of assistance! 😊
November 12, 2022 at 2:51 am #2412250Eva 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,
ThomasNovember 12, 2022 at 7:03 am #2412455David
StaffCustomer SupportHi 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.
-
AuthorPosts
- You must be logged in to reply to this topic.