Archived topic

text or image right of mobile-header-logo

5 replies · Started by Damiaan van Vliet on May 1, 2019

Viewing posts 1–6 of 6

May 1, 2019 at 4:16 am #885326

Hi team,
I wanted to establish with a hook (element) some tekst right of the logo on mobile.
But I cannot figure out which hook I need to use or maybe I should modify the header.php template.

So om a website (I will put the link below) when watched on mobile, in the header left is the logo and right is the menu. Between them I want a extra text or image.

I tried a few things but no luck.

Thanks!

May 1, 2019 at 4:32 am #885346

Hi there,

you can use the GP Hook Element.

1. Create a new hook.
2. Add your content:

<div class="custom-mobile">my content</div>

3. Select the inside_mobile_header hook
4. Set your display rules.

Then a little CSS for reordering and centering the custom content:

#mobile-header .inside-navigation {
    align-items: center;
}
#mobile-header .site-logo {
    order: -1;
}
.custom-mobile {
    margin-left: auto;
    margin-right: auto;
}

May 1, 2019 at 4:46 am #885358

Great David! Quick reply :)

I tried the inside_mobile_header hook but could not find the right CSS.
I think because of the CSS class order I never used before.

I am sure it will work, so I will mark it as resolved.
Thanks!

May 1, 2019 at 5:01 am #885383

The mobile header uses flex-box, which the order property is one of the very cool features :)
Glad to be of help.

May 1, 2019 at 6:14 am #885463

Cool! And it works :) So my customer is also happy.

May 1, 2019 at 6:50 am #885617

Glad to hear that.

This archived topic is closed to new replies.

Start building better websites today.