Why isn't my header border color code working?

Store Design
1

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?

2

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.

3

https://xcv5jupy4qkggg7r-15368361.shopifypreview.com

4

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.

5

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

6

@BobbyB1219

oh sorry can you try this code

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

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.

8

@BobbyB1219

if possible to share issue images?

9

BobbyB1219_0-1650955737839.png
BobbyB1219_0-1650955737839.png1346×278 40.5 KB

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

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

10

@BobbyB1219

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

11

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.

12

@BobbyB1219

great thanks for update