[Resolved] Header with two colors?

[Janek]

Hi,
Please see this screenshot here https://box.everhelper.me/attachment/707467/d5919ccc-12ab-4053-af8a-c28dccf41bc1/231843-CBS0vs64zm28UVtl/screen.jpeg

As you see there is a header with two colors: blue and white. Is there a way to create this kind of responsive header with Generatepress? At the moment i uploaded an image but on smaller screens it is not working as needed and is overlapping the header widget.

Thanks,
J.

[Tom]

My initial thought is using a background image, positioning it to the left and setting it to no-repeat.

However, if you can link me to that site I can see how they did it and let you know 🙂

[Janek]

Kind of worked just needs to be tweaked for smaller devices. Original site is here though http://anpsthemes.com/industrial/demo-1/

Semmes that there is something to do with the .logo:before pseudo class or something…

[Tom]

Ah, you could try something like that..

.site-logo::before {
    background-color: #000000;
    content: "";
    height: 100%;
    position: absolute;
    right: 100%;
    top: 0;
    width: 1200px;
}

[Janek]

Hi Tom,
Thank you for your reply but it seems that it is not working.

What do i have so far from customizer:
Background: default (white)
No background image for header
Header width: full
Inner Header Width: contained

[Tom]

Any chance you can link me to your site with the above CSS added?

[Janek]

Hi Tom,
Yes, sure. Please see here http://bit.ly/2hTHCul

[Tom]

Alright, let’s try this complete CSS:

.site-header {
    overflow-y: hidden;
}

.inside-header {
    position: relative;
    box-sizing: border-box;
}

.site-logo::before {
    background-color: #000000;
    content: "";
    height: 500px;
    position: absolute;
    right: 100%;
    top: 0;
    width: 1200px;
}

[Janek]

Hi Tom,

Thank you. This on almost worked… Left from the logo is changed now but the logo background is not yet. Please see the site again, your code is added.

[Tom]

Here we go:

@media (min-width: 769px) {
    .site-logo::before {
        background-color: #3598DB;
        content: "";
        height: 500px;
        position: absolute;
        right: calc(100% - 247px);
        top: 0;
        width: 1200px;
        z-index: 1;
    }
    .site-logo:after {
        border-left: 0 solid #3598DB;
        border-right: 120px solid transparent;
        border-top: 144px solid #3598DB;
        content: "";
        height: 0;
        position: absolute;
        left: 247px;
        top: 0;
        width: 0;
    }
    img.header-image {
        position: relative;
        z-index: 2;
    }
}

[Janek]

Excellent! Just excellent!

Thank you so much, Tom! Can i buy you a beer over Paypal or something?

[Tom]

You’re very welcome – thanks for working through it with me 🙂

Beer is always appreciated!: https://generatepress.com/ongoing-development

Thanks!

[Author]

Posts