Vert-text class not working

[juliana]

Hello,

i was looking at the header template: option 3 - you can see a vertical text “The Johnston” I also found that you are using a specific class: vert-text into it at the customize tab to make the text vertical. The problem is that css class its not working when I try to make the text vertical in layout that I am building at global block section.

This vert-text class only works at this specific header (option 3) or can I use it in general? how?
thank you

[ruenel]

Hello @juliana,

Thanks for writing in!

The CSS class selector vert-text was used in a bar’s inline element CSS:

$el .vert-text {
    position: absolute;
    top: 1.6em;
    left: 2.6em;
    transform: rotate(90deg);
    transform-origin: left top;
}

You cannot use the vert-text class in your global block because it will ONLY work for the header. If you want to apply the same styling for your text elements in your global block, here’s what you are going to do:
1.) Go to X/Pro > Global Block and create your block.
2.) Insert a section, row, and columns.
3.) Insert your text element in each of the columns and please do not forget to add the vert-text class to teh text element.
4.) In your section settings, find the “Customize” tab and insert the code above as the section’s inline element CSS.

Be advised that the code above is a default styling for the header. It is merely a guide on how you can accomplish what you want to do. Feel free to modify the code above and add more of your own styling. You will have to maintain the code whenever there is a theme and plugin updates.

Best Regards.

[juliana]

Thank you! Got it!
have a good day!

[tristup]

Hi @juliana,

You are most welcome.

Thanks