Customize header design - create a special shape of the header

[PhMA]

hello community 🙂

we are using the "refresh theme" and the header currently looks like this:

but we would like to achieve such a look of the header, that this red marked part is overlapping the header like a tongue stuck out and that the behavior is fully responsive and also fully sticky header:

how can we achieve this? without slowing down the page speed and with a clean and good solution

many thanks,

preview link: https://fo68e6svg3jpprqu-61049766108.shopifypreview.com

[Sweans]

Hi @PhMA,

To make this happen you need to add a small css code in your theme file. for that follow below steps,

h1.header__heading {
    position: relative;
    background-color: #007c7c;
    text-align: center;
    color: white;
    padding: 43px 0;
    overflow: hidden;
    position: absolute;
    bottom: -114px;
    border-bottom-left-radius: 88px;
    border-bottom-right-radius: 89px;
} 

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[Made4uo-Ribe]

Hi @PhMA 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

h1.header__heading {
    position: absolute;
    top: 0;
    height: 20vh;
    background: #004C4C;
    z-index: 100;
    overflow: auto;
    padding: 20px 10px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

.header__heading-logo-wrapper {
    padding-top: 20px;
}

img.header__heading-logo {
    height: 8vh;
}
@media (max-width: 600px) {
    h1.header__heading {
        height: 15vh;
        padding: 15px 5px;
    }
    img.header__heading-logo {
        height: 6vh;
    }
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[PhMA]

@Made4uo-Ribe  @Sweans  many thanks for your replies, how can I change the shape of this part:

so make it exactly in this shape:

and it should be first small icon

and then below the name:

Matu

Mate

like in this sketch :

many thanks

[Made4uo-Ribe]

Yes, that is also my concern. We cannot change that one because it's the image you added in the logo. 

[PhMA]

@Made4uo-Ribe  imagine if we would replace the logo and upload instead such a logo:

how can we then adjust the shape so it has the same shape as on the cans? thanks