Why isn't my header border color code working?

[BobbyB1219]

I'm working on a new site for a customer so it's not live. My code is...

section.sf-header {
border-bottom: 15px solid #313131;
}

This creates the border I want but it will not recognize the color even if I do

section.sf-header {
border-bottom: 15px solid #313131 !Important;
}

What am I missing?

[AvadaCommerce]

Hi @BobbyB1219 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[BobbyB1219]

https://xcv5jupy4qkggg7r-15368361.shopifypreview.com

[AvadaCommerce]

Hi @BobbyB1219 ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

#shopify-section-template--14567458472036__1621243260e1af0c20 {
    border-top: 15px solid #313131;
    margin-top: -15px;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[BobbyB1219]

This is close but it only applies to the home page. In my original post, I was trying to apply it to the header site-wide. I think earlier I tried the section but I started with section# instead of shopify-section

[KetanKumar]

@BobbyB1219 

oh sorry can you try this code

#shopify-section-header {
    border-bottom: 15px solid #313131;
}

[BobbyB1219]

This problem is so weird. That creates the border but yet still will not recognize the color I am keying even if I put !Important at the end. Now even more confusing is if I do border-top with everything you posted it works perfectly. Not sure what it is about border-bottom that is creating this problem.

[KetanKumar]

@BobbyB1219 

if possible to share issue images?

[BobbyB1219]

#shopify-section-header {
border-bottom: 5px solid #313131;
}

Creates the bottom border but it keeps making it the background color.

[KetanKumar]

@BobbyB1219 

This preview link has expired
Please contact the store owner for a new link.

[BobbyB1219]

No worries. I finally figured it out. The correct class to modify is .sf-header header {} and not what was suggested above. I appreciate all of the help though.

[KetanKumar]

@BobbyB1219 

great thanks for update