overlay text in header(title)

Hello @efimov2025,

Thank you for reaching out,
Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

@media(min-width:961px) {
    .site-breadcrumbs,
    .page-header-title {
        width: 50%;
    }
}

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools.

I hope that helps.
Best Regards

• This reply was modified 1 year, 1 month ago by Shahin.

Thank you. It really helped.
However, it doesn’t look very nice.
Now you have drawn an invisible line of demarcation vertically at the 50% level. Title on the left and bread crumbs on the right. Is it possible to split the Title space horizontally? so that the Title is on top and the bread crumbs are on the bottom?

https://disk.yandex.ru/i/mdg7hE2UPyKhRw

Hello @efimov2025,

Thank you for reaching out,
Please use this CSS instead of the previous one:

@media(min-width:961px) {
    .page-header .container {display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center;}
    .site-breadcrumbs, .page-header-title {max-width: 100%;width: 100%;}
    .site-breadcrumbs {position: relative;margin: 20px 0 0 0;}
}

@media(max-width: 480px) {
    .page-header {display: block;}
    .site-breadcrumbs {height: auto;}
    .site-breadcrumbs ol li {vertical-align: text-top;}
    .site-breadcrumbs ol li.trail-end a {white-space: break-spaces;}
}

Result: https://postimg.cc/S2z8fqTy.

I hope it helps.
Best Regards

You helped me a lot. I am very grateful to you

You’re most welcome.
I’m glad we could help.