[Resolved] How can I add user icon (which has custom login url in it) to mobile header

[Tri Ryuzaki]

How can I add an user icon (which has custom login url in it) next to the mini cart icon of Mobile Header. I try to use hook but can not do it properly. Please help me, thanks a lot. That mean the order of mobile header’s elements should look like:
Logo—————————User Icon—Cart Icon—Menu Button.
Hope that makes sense.

Incase you need, here is temporary login
user: demo
pass: demo

[David]

Hi there,

you can add the HTML for your User Login to the inside_mobile_menu_bar hook.
This will place it in the desired location. Let us know.

[Tri Ryuzaki]

inside_mobile_menu_bar is not working. Only inside_mobile_header can show up the content but it shows up right before the logo which is not correct position. Could you take a look, thanks.

View post on imgur.com

https://aothuatxu.com
user:demo
pass:demo

[Tom]

Hi there,

Can you try giving your HTML this class:

<div class="mobile-bar-items">
    User
</div>

Let me know if that does it or not 🙂

[Tri Ryuzaki]

Hi, it does move to inside now, but I need the user icon display on the left of cart icon. Is it possible ? Thanks so much

View post on imgur.com

[David]

Try adding this CSS:

.main-navigation.has-branding .menu-toggle {
    order: 4 !important;
}
.mobile-bar-items.wc-mobile-cart-items {
    order: 3 !important;
    margin-left: 1em;
}

[Tri Ryuzaki]

Hi David, it works like magic. Thanks a lot =)

[David]

Glad to be of help

[Author]

Posts