Prestige theme: remove header line

[carlajickie]

Hi, i recently upgraded to 8.1 prestige and I now have a white line between my announcement bar and header image

i tried pasting this code but it does not work:

.Header { box-shadow: none !important; }

please anyone ? thanks

 

[ZestardTech]

Hello There,
Please share your store URL and Password.
So that I will check and let you know the exact solution here.

[carlajickie]

hi it's on pause right now but i took a larger screenshot it's the white line above the logo:

[Dan-From-Ryviu]

Hi @carlajickie 

Could you drop your store link here to check?

[Moeed]

Hey @carlajickie 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[foxdeveloper]

Hey @carlajickie ,

Could you provide the store URL and password? I can check and give you some CSS to add. Most likely it is not a box shadow issue but probably a border bottom or a margin placed on the header. Let me know and I will send the CSS. Thanks again 🙂

[carlajickie]

url: www.jickie.co

password: nuxl

thank you

[foxdeveloper · Accepted solution]

Hey @carlajickie , could you try adding the following into your theme.css file right at the bottom:

@media screen and (min-width: 700px)
#shopify-section-sections--20077799702876__header {
    --header-padding-block: 1rem!important;
}

Alternatively, you can also look into your theme.liquid file for this: and adjust it from 1.2rem to 1rem. (the .2 is what is causing the space at the top). See screenshot below

[carlajickie]

works thanks a lot !!

[foxdeveloper]

You are welcome, I'm happy to help! 😁

Let me know if you need help with anything else..also cool website & brand idea by the way!

Speak soon,

Alex

[carlajickie]

actually weirdly enough it stopped working ... 😕

[foxdeveloper]

Hey @carlajickie , it seems when you added the announcment bar, it changed the ID of the section so the CSS was no longer targeting the element as the selector changed.

1. Please go into your code base and go to the header section (likely it is in sections > header.liquid
2. Search for the <header> element with the class names of shopify-section shopify-section-group-header-group shopify-section--header
3. add your own custom class name (such as customheader)
4. replace the CSS I gave above to the one below:

@media screen and (min-width: 700px)
.customheader{
    --header-padding-block: 1rem!important;
}

Alternatively, you could replace the previous CSS with this:

@media screen and (min-width: 700px)
.shopify-section.shopify-section-group-header-group.shopify-section--header{
    --header-padding-block: 1rem!important;
}

I would recommend the first solution over this one though because this could affect other elements too. The first one with a custom class name makes sure that you are targeting this element (and only this element)

Let me know if that works for you @carlajickie 🙂