Add 3 color lines below header in Prestige Theme

ccsachs
Excursionist
31 0 6

Seeking a solution to add three lines of color below the header on the Prestige theme. We have been using an older version of the theme and discovered that the updates changed the theme enough that the previous method is no longer useable. 

 

Previously: 
1) added this below </header> in the header.liquid file

<div class="strip">
            <div class="stripA">&nbsp; </div>
            <div class="stripB">&nbsp; </div>
            <div class="stripC">&nbsp; </div>
      </div>

2) added this to base.css

/** color lines under header  */
.strip>div{
    height:6px;
  border: 0;
}

.stripA{
    background-color: #d95032;
}
.stripB{
    background-color: #f28705;
}
.stripC{
    background-color: #f2b705;
}

.header-wrapper--border-bottom {
    border-bottom: 0 !important;
}

 

Base.css is now theme.css, no issue there. 
However, we are unable to locate </header> in any files. We looked within the section header.liquid, we looked in in header-group.json, and in various other files. We even did a global search in the code editor and did not find. Our assumption is that this is not liquid code that auto-generates the ending for header. 
Thoughts?
Current website to see the three color bar we are using: https://www.amclassic.com/
Test website: https://29bsbsm2ose8gjl5-50973442205.shopifypreview.com in case you want to see how it lays out. Here's the quick view of the page: 

ccsachs_0-1707777137951.png

 

Replies 2 (2)

Made4uo-Ribe
Shopify Partner
5102 1217 1488

Hi @ccsachs 

I suggest to paste this code on this area.

Made4uoRibe_0-1707781085700.png

When you check it on the inspect tool it place before the script and </header>

Made4uoRibe_1-1707781147050.png

Im using, presitige v.8.2.

But I suggest to hire some developer to make it dynamic. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Spac-es
Shopify Partner
300 89 114

It was an interesting challenge. I came up with a solution using the :after pseudo-element. After many failed attempts with the background-color attribute, I opted for box-shadow to allow for all three lines to be visible. I hope it helped you out!

 

Add this code in your base.css file:

header#shopify-section-sections--16797605560477__header {
  position: relative;
}

header#shopify-section-sections--16797605560477__header:after {
  content: '';
  height: 6px;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-shadow: 0 6px 0 #d95032, 0 12px 0 #f28705, 0 18px 0 #f2b705;
}

Result:

 

result.PNG