[Resolved] Adding a mobile / tablet whatsapp image/link

[Alberto Barrionuevo-Garcia]

Hi,
We’ ve successfully added an image/link to whatsapp app in the mobile header of our web with the tool “hook” as you have recommended in other related topics. Our problems started trying to customize the header, our goal was to put the whatsapp html code in the middle of the mobile header, in between the logo and the menu stripes. Our first attempt was adding just the whatsapp html code with a hook but it appeared on the left side of the logo. The next attempt was removing the logo and adding it as html code on the same hook as the whatsapp html code, it was successful and with a little css editing our mobile header was great. The downside was the tablet view, it was a mess, could you, please, give as a hand.
Thank you very much in advance.
Antonio

[David]

Hi there,

if you use the inside_mobile_header so the element appears before the logo then we can take advantage of the Flexbox CSS inside the mobile header. This CSS will move the Logo to the left of your hooked content:

.site-logo.mobile-header-logo {
    order: -1;
}

[Alberto Barrionuevo-Garcia]

Hi David,
It worked like a charm, you made our day, thank you very much.

[David]

Glad to be of help.

[Author]

Posts