[Resolved] woo My Account icon in nav

[Peery]

Hello,

I want the fa fa-user icon to display next to the cart icon.. outside of the main menu.

not like this.. (https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right)

How would I achieve this? I tried searching for ways and I found one solution but it only worked on mobile menus.. Would like the icon to be displayed on both displays.. Just as the Cart icon does. Please let me know.

Thanks.

Peery

[David]

Hi there,

For the Mobile Menu you can add your link/icon HTML using the inside_mobile_menu_bar hook.
That article should work fine for desktop, just place it as the last item in the menu. you can also add the hide-on-mobile CSS class to remove it from the mobile menu dropdown.

[Peery]

Then that would not show up like the Cart icon on mobile… the Account icon would be in the drop down menu.. Right?

[David]

No – the hook will place it in the the container that the Cart icon is displayed. The second part will add it to desktop menu and hide it from the mobile dropdown menu.

[Peery]

Ok ok.. I got what you saying now.. Thanks 🙂 Working on it now will update.

[Peery]

Hey can you check it please… Icon shows up when you visit homepage but when you start going to other pages icon goes away.. I have still not added the hook yet for mobile though.. Only working on desktop right now.. Thanks! also.. been watching the other articles today.. u been on it 🙂 tell em u need raise 🙂

[David]

Cool – glad to be of help

[Peery]

let me know if you can see icon on any other page than the home page please. desktop version

[David]

The issue is because the FA icons are being loaded by Elementor – which is not present on the other pages. Theres a few workaround.

Easiest one, are you intending to add any social icons or other Elementor designed content across your site? If so you then by hooking in or using widgets containing an elementor template will force the FA icon to load. Let us know

[Peery]

Ok i got it now.. Just put it in the footer for now… Will display:none that one or something else later on 🙂 Thanks for all the help.. now I work on the hook.

[David]

You’re welcome.

[Peery]

I lost the forum post when I found the hook code…

This is what I got though..

add_action( 'generate_inside_mobile_header_menu','my_account_mobile_menu' );  
function my_account_mobile_menu() { ?> 
	<i class="fa fa-user my-account-mobile-menu" aria-hidden="true"></i>
<?php }

showing in a weird place though. please let me know. thanks.

[Peery]

I had the hook working earlier before i posted this forum.. Cant seem to get it working now..

[Peery]

add_action( 'generate_inside_mobile_header','my_account_mobile_menu' );  
function my_account_mobile_menu() { ?> 
	<div class="mobile-bar-items">
		<a title="My Account" href="#"><i class="fa fa-user"></i></a>
	</div>
<?php }

works.. 🙂 but.. user icon is on right side of cart icon on mobile.. and on left side of cart icon on desktop…

here is forum – https://generatepress.com/forums/topic/add-my-account-link-in-main-navigation/

[Tom]

Hi there,

Try adding this CSS:

.nav-aligned-right .main-navigation .menu > li.hide-on-mobile {
    float: right;
}

[Author]

Posts