Dawn Theme "sold out" button alignment and sticky header

[iamdawnumcm]

Dear Team,

I have two questions.

1. How can I align the sold out button on the main page to the top left corner instead of bottom left corner?

2.How can I have the permanent sticky logo + menu bar header when user scroll down&up?

My url is https://gbjxzl5fy67ga11p-42324328597.shopifypreview.com

Sincerely for your patience!

[dmwwebartisan]

@iamdawnumcm

please Go to Online Store->Theme->Edit code then go to assets/base.css->paste below code at the bottom of the file.

.header-wrapper {
    display: block;
    position: fixed !important;
    background-color: rgb(var(--color-background));
    width: 100% !important;
}

#shopify-section-announcement-bar {
    z-index: 4;
    position: fixed !important;
    width: 100% !important;
}

Thanks!

[dmwwebartisan]

@iamdawnumcm

Please clear following point

1. How can I align the sold out button on the main page to the top left corner instead of bottom left corner?

[iamdawnumcm]

@dmwwebartisan

@iamdawnumcm

Please clear following point

1. How can I align the sold out button on the main page to the top left corner instead of bottom left corner?

So on the home page, when products sold out. There will be a sold out badge. I want to move the sold out badge to the top left corner of the product image.

https://gbjxzl5fy67ga11p-42324328597.shopifypreview.com

And can I have the sold out badge as in light grey like this instead of black?

[dmwwebartisan]

@iamdawnumcm

please Go to Online Store->Theme->Edit code then go to assets/base.css->paste below code at the bottom of the file.

@media screen and (max-width: 749px){
.header-wrapper {margin-top: 5rem;}
#MainContent{margin-top: 15rem;}
.card__badge {bottom: 12rem !important;}
}

@media screen and (min-width: 750px){
#MainContent{margin-top: 15rem;}
.card__badge {bottom: 20rem !important;}
}

[iamdawnumcm]

And can I have the sold out badge as in light grey like this instead of black?

[dmwwebartisan]

@iamdawnumcm

.badge {
 background-color: #A9A9A9 !important;
    border-color: #f3f3f3 !important;
    color: #000 !important;
}

[MyLUCA]

Hi @dmwwebartisan

when I paste this code into the file, the menu is partly covered by the announcement bar.

https://luca-wallets.myshopify.com/

PW: myluca

Thank you.

[dmwwebartisan]

@MyLUCA

Please remove old code and add following code

please Go to Online Store->Theme->Edit code then go to assets/base.css->paste below code at the bottom of the file.

.header-wrapper {
    display: block;
    position: fixed !important;
    background-color: rgb(var(--color-background));
    width: 100% !important;
    top: 35px;
}

#shopify-section-announcement-bar {
    z-index: 4;
    position: fixed !important;
    width: 100% !important;
}

Thanks!

[MyLUCA]

Perfect. Thank you so much!

[dmwwebartisan]

@MyLUCA

Thanks! Welcome again.

[MyLUCA]

Hey @dmwwebartisan

I just saw that now the bar + menu covers probably 35px of the rest of the page.
In mobile view and in normal view.

[dmwwebartisan]

@MyLUCA

please Go to Online Store->Theme->Edit code then go to assets/base.css->paste below code at the bottom of the file.

@media screen and (max-width: 749px){
#MainContent{margin-top: 15rem;}
}
@media screen and (min-width: 750px){
#MainContent{margin-top: 15rem;}
}

Thanks!

[MyLUCA]

Thanks.

I found out how I can like, but how do I accept a solution?

[iamdawnumcm]

Hi Thanks for the message. The color changed but the alignment of"Soldout" is wrong in the product page.