How to reduce the top margin size of the header - Dawn theme

[HT23]

Hi !

I would like to educe the top margin size of my header. I tried multiples codes, in “theme.liquid” and “base.css”, but nothing works.

To show you : I would like to delete this empty space, represented by the red rectangle.

Can someone help me please ?

(sorry for my english, I’m french).

[websensepro]

Bonjour @HT23 , pourriez-vous s’il vous plaît fournir l’URL de votre magasin et, si elle est protégée par un mot de passe, merci de partager également le mot de passe. Merci.

OR

Hi @HT23 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[HT23]

Yes,

URL : https://quatreausoir.fr/

Password : KeyCode

[Rahul_dhiman]

Hello @HT23

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media (min-width: 768px) {
.header-wrapper.color-scheme-5.gradient {
margin-top: -38px !important;
}
}

result

Thanks

[nafio_nabi]

Hi,

The empty space is the announcement bar section. The easiest way to delete the empty space is to delete the announcement bar section. I made a short YouTube video of how to do it. Here is the video: https://youtu.be/caMHwPo7aV4

Let me know if it works.

Warm Regards,

Nafio Naabi

[websensepro]

@HT23

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (min-width: 990px) {
    .header:not(.header--middle-left,.header--middle-center) .header__inline-menu {
        margin-top: -4.95rem !important;
        margin-bottom: 23px !important;
    }
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[topnewyork]

Hello, @HT23

1. Go to Online Store
2. Edit Code
3. Find theme.css/base.css file
4. Add the following code in the bottom

header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account {
    margin-top: -39px !important;
}

@media screen and (min-width: 990px) {
    .header--top-center .header__inline-menu>.list-menu--inline {
        justify-content: center;
        margin-top: 0px !important;
    }
}

Result

[HT23]

Oh yes it works !! I was typing “.header” only.

Thank you so much !