Bar with text in background

[S.]

Hi,
I want to implement a colored vertical bar in the content area, so between the header and the footer. This bar should be different per page, the color as well as the text upon it. The text should be close to the image above it. The image is implemented as the first section of the page, the text on the bar is implemented in the second section. The bar itself is currently implemented as background-image on the page (via custom CSS).
My current implementation (e.g. https://jeelo.nl/scholen-en-ikcs) does not work nice on different devices since there is no connection between the vertical bar and the text.

I use GP with Premium and Elementor on this website, and the construction applies only to tablets and desktops.

Is there any solution/advice I could give a try so the text remains in the colored bar?

[Elvin]

Hi,

To clarify:

You want the text to be inside the yellow shape that stretches vertically downwards the whole page?

Or, should the shape only stretch within the section?

You may have to resort to absolute positioned text element on Elementor with this one.

A wise man once said:
"Have you cleared your cache?"

[S.]

Hi,

To clarify: The text should remain in the yellow bar, no matter what screen size of the desktop/tablet.

I changed the positioning of the text object to ‘absolute’, with top = 0px and left = 0px. But unfortunately that does not make a difference. This updated solution is still in place, so if you could verify, or give more advice it would be terrific!

Best regards

[David]

Hi there,

really difficult to do that with a background image as it will want to rescale with the size of the browser. Instead, remove the background and try this:

@media(min-width: 769px) {
    .page-id-65 #content {
        position: relative;
    }

    .page-id-65 #content:before {
        content: '';
        display: block;
        position: absolute;
        background-color: #FCEE21;
        right: calc(((100vw - 900px) / 2) + 100px);
        top: 0;
        bottom: 0;
        width: 240px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[S.]

David,

Thanks a lot! This was the solution I was looking for.

[David]

I must admit it was a bit of puzzle that one 🙂
Glad to be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts