Add a thin white line in top of footer below widgets

Instead of the border, I’d make the footer’s backgroud slightly deeper:

#cb-row--footer-bottom .footer--row-inner {
background-color: 1px sold #013b72;
}

But if you really want to use the border instead, then here goes:

#cb-row--footer-bottom .footer--row-inner {
border-top: 1px sold #013b72;
}

Place either code in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS

(Whichever option you choose to use, feel free to change the color as desired)

Unfortunately the client wants the line and colors need to stay as specified.

Unfortunately the client wants the line and colors need to stay as specified.

I provided the code for the border option. Read my complete response.

Also, note that clients often make these decisions from a place of limited knowlege and/or information, and may change their mind when presented with better options. I’ll advice that you show your client screenshots of the two approaches, and let them choose one.

Thanks @gappiah much appreciate your help. Is there a way to shorten the line on either side so it has a space between footer edges?

Is there a way to shorten the line on either side so it has a space between footer edges?

I’m unable to test this now (responding from a cellphone!), but you can try the CSS below (remove the previous one):

#cb-row--footer-bottom:before {
content: ""; 
position: absolute; 
left: 12%; 
right: 12%; 
border-top: 1px solid #fff;
}

If it works and you don’t have any undesired side effects ?? , kindly change the left and right offset percentages to whatever works best for you.

Hi @neilj01,

You can also try the below CSS, and this doesn’t affect your footer in responsiveness like in mobiles and tablets it doesn’t break your footer design.

#cb-row--footer-bottom{
    background-color: #004687;
}
#cb-row--footer-bottom .footer--row-inner{
    margin: 0 2rem;
}

#cb-row--footer-bottom.footer-bottom .customify-container{
    padding: 0;
}

Thank you both very much. Works perfectly.