[Support request] Widget's among each other in one column of the header?

[Armin]

Hi,

splitted the header into 3 columns like here.

But in the middle one, I need a second Text widget UNDER the Logo.

Tried with <br> , <p> and span in elements hook, but it wont work. The text remains beside the logo.

Custom css is

.before::before, .after::after {
content: “\A”;
white-space: pre;
}

p {
word-wrap:break-word;
}

and Element hook is

<span class=”after”> [widget id=”media_image-12″]</span>
<span class=”before”>[widget id=”text-8″]</span>

Any ideas?

Thank you very much!

[David]

Hi there,

you can stack the elements in that column with this CSS:

.header-section-2 {
    flex-direction: column;
}

You will then need to adjust your other CSS to close off the spacing between them

[Armin]

Thank you very much. 🙂

It works, but the Logos need to stay in a similar height.

I guess for the additional text, another 3-rowed column in the header could be the solution – so I can insert the text in row 2 col 2.

Would you help me arrange that?

[David]

You could edit this CSS Rule and add the additional property:

.header-section {
    display: flex;
    /* add the below property */
    align-items: flex-start;
}

[Armin]

Thats very cool. Thanks!

[David]

You’re welcome

[Author]

Posts