Vertical text element aligns and behaves unexpectedly

[nblund]

1
The vertical name in the right (header) bar does not align top responsively although I have used identical padding-top: 45px in both the horisontal and vertical bar of the header. How do I make it align at top? Please see attached image 1.

2
The same vertical name in the right (header) bar jumps down in viewport one the first text typing animation has occurred (before the second word animation starts). What have I done wrong? Please, see attached image 2 and 3.

3
Again, the vertical name in the right (header) bar - how would I make the two headlines align as a single row at smaller screen sizes? I have tried different css display solutions without luck - could it be done through the PRO configuration.

4
The final question about that vertical name in the right (header) bar: I wish to obtain a color that will change subject to the background so it remains visible at darker background colors. I have tried to apply mix-blend-mode difference to the text element, the container, and the bar. But it doesn’t work. Would you have any hints?

Thank you so much for your help.

[ruenel]

Hello @nblund,

Thank you for the details. Before this gets complicated, can you please clarify your expected outcome for your header? You can send us a mock layout or an example URL for your header. We would like to know how the vertical text logo will look like when you first load the page and how does it looks like when you scroll down the page. There might be a simpler way of doing what you have in mind without the use of the Fixed Right header placement. We are trying to get into your idea because your current setup affects the footer. There is a white space on the right side. We will try to give out a solution that does not create another issue or conflict in some areas of the page.

Hope this makes sense.

[nblund]

Hi again.

At load the logo is not displayed. Then some milliseconds after the first word will display, then the next. Once the animation is completed after 1 second or so, the logo remains fixed in that position. Please see attached image with further explanation. Hope this helps.

I really appreciate your help.

[ruenel]

Hello @nblund,

In rotating your text, you should be using this:

$el {
	transform: rotate(90deg) translate(80%,0);
}

Please check out this test header in the secure note below.

Thanks.

Your current CSS code gives out issues which is why you were having difficulty aligning the vertical text to the menu items.

[nblund]

Hi @ruenel. Appreciated. Unfortunately, placing the div in the top bar instead of the right and at the same time adding translate (80%,0) did not do the trick. All the above issues remain. You stated that my CSS code gives out issues. Not sure exactly what CSS you are referring to? Also, I am afraid I don’t understand the logic why translate (80%,0) would make it align with the menu items, which have a padding-top of 45px? As a matter of fact, I don’t understand why the vertical text would start above the top bar so that only some part of the vertical text displays when no additional css is applied to push the vertical text downwards.

Any other hints? Thanks so much.

[ruenel]

Hello @nblund,

When you use the rotate() CSS, you are rotate the element within the center of the elements. You cannot expect it to rotate and starts from the top. You are just rotating the element in the same fixed point. I am not sure I am explaining this properly. All I want you to understand is that you need to use rotate and translate() to be able to position the element. Perhaps this link will help:

• https://css-tricks.com/almanac/properties/t/transform/
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate()

My example is using this sample CSS:

.element {
    transform: rotate(90deg) translate(80%,0);
}

It is a combination of rotate() and translate().

Hope this explains it briefly.

[nblund]

Hi again. Thanks for your reply. Since aligning rotated text is a bit tricky (I understand css transform-origin can help), so I used writing-mode: vertical-rl instead, whereafter I could just add the 45px in the top to align with the menu links.

Thanks.

[ruenel]

Great! If there is anything else we can help you with, please do not hesitate to open another thread.