[Support request] icon “my account” menu bar

Home Forums Support icon “my account” menu bar

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1431094
    José Ojeda

    Hi, is there a way to create a “my account” icon on the main menu bar. that is the same as the shopping cart icon? thank you.

    icono barmenu

    ICONO ON PHONE

    #1431715
    David
    Staff
    Customer Support

    Hi there,

    you can do this by creating 2 x Hook Elements:

    1. For desktop
    Add the following code:

    <a class="account-link" href="add_url_to_your_account_page">
    	<svg aria-hidden="true" class="svg-accont-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    		<path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
    	</svg>
    </a>

    Make sure you update this part of the code with your account page URL:
    href="add_url_to_your_account_page"

    The select the Hook: inside_navigation_hook

    Set the Display Rules to Entire Site.

    2. Now create a new hook exactly the same as above. But use the Hook: inside_mobile_menu_bar

    Once that is done we will need to add some CSS.
    Can you provide access to the site so i can provide that CSS?

    #1435714
    José Ojeda

    Thank you very much for your quick response. I have the site open so you can help me with the CSS. If you could use the Google Chrome browser console to generate the CSS code it would be great. I thank you again.

    #1436219
    David
    Staff
    Customer Support

    This CSS for desktop:

    .inside-navigation {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .account-link {
        padding: 0 10px;
        order: 20;
    }
    .account-link svg {
        width: 15px;
    }

    Can you enable the Mobile Header in Customizer > Layout > Header then i can look at that CSS

    #1437027
    José Ojeda

    Thanks David for your great help. Have a great day. Everything turned out very well.

    #1437748
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.