Custom Line at bottom of site header disappears sporadically

Site URL: https://mandarin-walrus-9m6m.squarespace.com

Hi all, I'm new to Squarespace and have built a site using the Lukasa template for my small nonprofit. I used custom code to add 2 18px solid colored lines matching my logo--orange and purple-- to the bottom of my header, but the bottom orange line disappears when I click on the white space of the header (and then reappears if I click outside of the header.) The code I used is below. Does anyone have a fix? Or are my lines just too thick at 18px to support both in the header? Note: they seem to look fine most of the time. Thank you for any suggestions!

Header {

border-bottom: 18px solid #60269E;

outline: 18px solid #FF6C0E;

 } 

6 hours ago, mloonin said:

Site URL: https://mandarin-walrus-9m6m.squarespace.com

Hi all, I'm new to Squarespace and have built a site using the Lukasa template for my small nonprofit. I used custom code to add 2 18px solid colored lines matching my logo--orange and purple-- to the bottom of my header, but the bottom orange line disappears when I click on the white space of the header (and then reappears if I click outside of the header.) The code I used is below. Does anyone have a fix? Or are my lines just too thick at 18px to support both in the header? Note: they seem to look fine most of the time. Thank you for any suggestions!

Header {

border-bottom: 18px solid #60269E;

outline: 18px solid #FF6C0E;

 } 

Hey @mloonin try to add next code:

header {
  border-bottom: 18px solid #60269e;
  outline: 18px solid #ff6c0e !important;
  outline-offset: 0 !important;
}

7 hours ago, SquareRefresh said:

outline-offset: 0 !important;
}

Thank you! The new line of code definitely keeps both lines visible, but now the lines flicker on/off when loading a new page of the site. Anything else to try? Or I'm thinking of losing the double line altogether if it's just a distraction.

1 minute ago, mloonin said:

Thank you! The new line of code definitely keeps both lines visible, but now the lines flicker on/off when loading a new page of the site. Anything else to try? Or I'm thinking of losing the double line altogether if it's just a distraction.

You see that, because the site is loading, try to add preloader if You don't want to see that.

8 minutes ago, mloonin said:

Thank you! The new line of code definitely keeps both lines visible, but now the lines flicker on/off when loading a new page of the site. Anything else to try? Or I'm thinking of losing the double line altogether if it's just a distraction.

5 minutes ago, SquareRefresh said:

You see that, because the site is loading, try to add preloader if You don't want to see that.

Thanks! I'm a novice at this. Can you advise: is a pre-loader a plugin that I would need to purchase? And, if yes, is there one you recommend that would work with the Lukasa template? Or can I add that with code?

21 minutes ago, mloonin said:

Thanks! I'm a novice at this. Can you advise: is a pre-loader a plugin that I would need to purchase? And, if yes, is there one you recommend that would work with the Lukasa template? Or can I add that with code?

You can add preloader code if You're familiar with coding otherwise You should hire a developer. Also You can try to use some plugins. These plugins might be help for You:
https://squarerefresh.com/plugins/banner-transition
https://squarerefresh.com/plugins/page-transition