How to: A thin line over the whole page

[mickna]

Is it possible to add a thin line on the very top over the whole page and have a menu on the left hand?
I tried this with a second bar in header. First bar is a left header and includes my menu and second bar is a top header with only 5 pixels. Unfortunately the top header stops at the left bar.

What I want to achieve:

What I get:

Any solution for this?
Thank you,
Michael

[franticape]

It looks. Like your Problem is a x-index issue.
Try to switch the order of your bars and/or change the z-index value of each of them. Where the left bar will have a lower value than the top one.

I am supposing that without the left bar, that border like line will be full-width, right?

(not support, just a hopefully helping hand hehe)

[ruenel]

Hello Michael,

Thanks for writing in! What you are trying to do will not work if you use the custom header because of the left bar setup. It can only be done with custom CSS adding the thin line to the site container. This request is beyond the scope of our support already. We are unable to provide support for customizations under our Support Policy.

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.

Best Regards.

[mickna]

Hi @franticape
Thank you for your suggestion. I played around with z-index with no success. It seams that the left container is a separated area…

Again thank you for your suggestion

[mickna]

Hello @ruenel:

I see.
What I now did is to add a css for the .x-root. This seams to work:

.x-root {
display: flex;
border-top: 5px solid black;
border-image: linear-gradient(270deg, #FF00A7 0%, #FF0093 7%, #9300FF 18%, #404FBF 28%, #1E96E1 37%, #00E2FF 47%, #40EC00 58%, #C4FF00 66%, #FFFF00 77%, #FF6C00 88%, #FF0000 100%) 1;
}

Best,
Michael

[ruenel]

Hey Michael,

We are glad you’ve figured out a custom CSS to resolve your issue.
Thank you very much for letting us know.

Cheers.