How to fix the announcement bar overwriting main image in Dawn theme?

Store Design
1

Hi There,

Please I need help !!
I made some modification on the header and I noticed that the main image overwrites the announcement bar. Can anybody help me with the code I need to change ?

Thank you in advance.

Capture d’écran 2021-10-03 à 15.51.44.png
Capture d’écran 2021-10-03 à 15.51.44.png759×503 298 KB

Capture d’écran 2021-10-03 à 15.32.07.png
Capture d’écran 2021-10-03 à 15.32.07.png2880×1100 386 KB

2

@Thedd

Please share your store URL.

Thanks!

3

@dmwwebartisan

Link : https://daydreams-store.com/

Password : flowsk

Thank you for your help !

4

@Thedd

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) {
#shopify-section-template--15143761674435__image_banner { margin-top: 1px;}
}

@media screen and (min-width: 750px) {
#shopify-section-template--15143761674435__image_banner { margin-top: 14px;}
}

Thanks!

5

@dmwwebartisan

It works on desktop but not on mobile, I can’t change the color of the bar in my editor.

Thank you soo much for your help.

6

@Thedd

Try this css class

@media screen and (max-width: 749px) {
.banner__media.media {
    position: absolute;
    top: -66px !important;
}
}
7

@dmwwebartisan

It works very well.

Thank you very much