How can I edit headers and footers like in this image?

Store Design
1

Hey,

does anyone know how i an achieve a header bar like the attached image or if there are any aps available to edit headers and footers.

thanks

bakedbybean_0-1655631397656.png
bakedbybean_0-1655631397656.png2271×237 315 KB

2

Hi,

The header can be made by CSS only.

If you learn & play around with the CSS editing, it can be made easily.

I made a header like your picture using the css file with Prestige Theme.

The screenshots & codes are available below.

before.png
before.png3297×1704 414 KB

after-1.png
after-1.png2747×1630 324 KB

after-2.png
after-2.png3284×1665 354 KB

after-3.png
after-3.png3327×1620 278 KB

The parts of the codes are as below.

.Header {
    top: 50px;
    border-radius: 10px;
    position: fixed;
    width: 95%;
    background: #fff3f3;
    color: #77602c;
    height: 60px;
    box-shadow: 0 0 2px 1px #00000052;
    transition: background .3s ease-in-out,box-shadow .3s ease-in-out;
    align-content: space-around;
    align-items: center;
    justify-content: space-evenly;
}
.Header__Wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.shopify-section--header {
    position: -webkit-sticky;
    position: sticky;
    display: inline-flex;
    justify-content: center;
    width: 100%;
    z-index: 19;
}
.MegaMenu__Inner {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    overflow: hidden;
}

You need to fix many parts to work the header, megamenu, search & cart drawer correctly.

If you have any other questions, please let me know.

Thanks.

1 Like