Re: Header border problems

Why isn't my header border color code working?

BobbyB1219
Tourist
8 1 2

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?

Replies 11 (11)

AvadaCommerce
Shopify Partner
3879 839 985

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.

banned
AvadaCommerce
Shopify Partner
3879 839 985

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.

banned
BobbyB1219
Tourist
8 1 2

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
Shopify Partner
37144 3648 12059

@BobbyB1219 

oh sorry can you try this code

#shopify-section-header {
    border-bottom: 15px solid #313131;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BobbyB1219
Tourist
8 1 2

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
Shopify Partner
37144 3648 12059

@BobbyB1219 

if possible to share issue images?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BobbyB1219
Tourist
8 1 2

BobbyB1219_0-1650955737839.png

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

 

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

KetanKumar
Shopify Partner
37144 3648 12059

@BobbyB1219 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BobbyB1219
Tourist
8 1 2

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
Shopify Partner
37144 3648 12059

@BobbyB1219 

great thanks for update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing