[Support request] Mobile Header Hooks

[tolis]

Hello, how i can put in mobile header a phone icon and a account icon left and right the logo?

https://i.postimg.cc/wMqgvk8w/Screenshot-2022-06-13-at-11-09-00-AM.png

[Fernando]

Hi Tolis,

It cant seem to view the site you’ve linked even when using a proxy server located in Germany: https://share.getcloudapp.com/KoujqprG

In any case, you can try creating two separate Buttons Block through a Block Element hooked to inside_mobile_menu_control_wrapper and displayed to your preferred location. Example: https://share.getcloudapp.com/ApuXj5GZ

Then we can use CSS to place them in the right location.

Kindly let us know once you’ve added them.

[tolis]

ok i added them can you help me with the css please 😉

[David]

Hi there,

did you add the Buttons to the hook ? As i cannot see them on the site.

[tolis]

hello, yes i added them

[tolis]

if i choose the hook menu_bar_items they appear in mobile menu but when i choose inside_mobile_menu_control_wrapper they dont appear

https://postimg.cc/gallery/LZ4Vcb9

[David]

OK, i can see them now 🙂

1. Select the Buttons block ( the outer block not the button ) that contains the Phone Button. In Advanced > Additional CSS Classes add: phone-button

2. Change this CSS:

#mobile-header .menu-toggle {
    order: -1;
    margin-right: auto;
}

to:

#mobile-header .menu-toggle {
    order: -1;
}

3. Add this CSS:

#mobile-header .phone-button {
    margin-right: auto;
}

[tolis]

Thank you very much it worked 😉

[David]

Glad to hear that!

[Author]

Posts