Archived topic

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

7 replies · Started by Tri Ryuzaki on January 17, 2020

Viewing posts 1–8 of 8

January 17, 2020 at 6:01 pm #1135646

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

January 18, 2020 at 2:53 am #1135816

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.

January 18, 2020 at 12:21 pm #1136321

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.

https://imgur.com/6CgGUMz

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

January 18, 2020 at 6:34 pm #1136485

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 :)

January 18, 2020 at 6:54 pm #1136494

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

https://imgur.com/9F5Nkoz

January 19, 2020 at 4:21 am #1136698

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;
}

January 19, 2020 at 4:33 pm #1137326

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

January 20, 2020 at 2:09 am #1137576

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.