Re: Custom border beneath header in Craft

Solved

How to add a custom border under a header in Craft?

mmontella
Tourist
11 0 0

Hi everyone, 

 

I am looking to add a custom border beneath my header on my Shopify page. The URL is campagnacoffee.com. I have a PNG image file that I would like to use as this border, and I've included a screenshot of it below. I would like this border to run across the top of my page below the header. 

 

Campagna__Flourish18-Blue.png

 

Hopefully someone can help me with this; it's much appreciated.

 

Sincerely,

Michael 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2138 615 501

This is an accepted solution.

Hey @mmontella,

That would be more feasible.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

The value "5px" is the size, reduce it or increase it according to what works for you.

<style>
sticky-header.header-wrapper.color-background-1.gradient {
    border-bottom: 5px solid rgb(69, 125, 199);
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706809160616.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 8 (8)

ThePrimeWeb
Shopify Partner
2138 615 501

Hey @mmontella,

Something like this?

ThePrimeWeb_0-1706732821946.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
mmontella
Tourist
11 0 0

Hi @ThePrimeWeb ,

 

That's the right idea, though obviously I'd like to make the border much thinner than what you have pictured. Do you know what I mean? Is this possible and fairly easy to do?

 

All the best,

Michael 

ThePrimeWeb
Shopify Partner
2138 615 501

Hey @mmontella,

 

I would say it's a "hack" way of doing it, rather than the proper way. That's what makes it easier. The image is in it's original size. I have not amended it. Maybe you'd want to use a smaller image?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
mmontella
Tourist
11 0 0

Hm, I get it. If we can't get the image to look quite right, what about just a simple, thick line under the header? How would I add that? 

ThePrimeWeb
Shopify Partner
2138 615 501

This is an accepted solution.

Hey @mmontella,

That would be more feasible.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

The value "5px" is the size, reduce it or increase it according to what works for you.

<style>
sticky-header.header-wrapper.color-background-1.gradient {
    border-bottom: 5px solid rgb(69, 125, 199);
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706809160616.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
mmontella
Tourist
11 0 0

Okay, that worked; it's a pretty good fix for the time being, as I wanted something to separate my menu from the rest of the webpage. 

 

More generally: how possible is it to add "decorative flourishes" to Shopify pages? We have a whole design book of flourishes for our brand which I'd like to include in the website's design, though I'm not sure how possible this is. 

 

I'm including a few more of the images here:

 

Campagna__Flourish10-Blue.png

Campagna__Flourish9-Blue.png

Campagna__Flourish1-Blue.png

   

ThePrimeWeb
Shopify Partner
2138 615 501

Hey @mmontella,

You would have to get custom development for multiple designs. Shopify in it's default is blank page where you add sections. There's no quick and easy way to alter the page design in that manner without altering code. 

 

I wouldn't mind talking more in detail about the idea you have for your page. We can discuss futher in a PM, if you are keen of course.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
mmontella
Tourist
11 0 0

Okay, that is good to know. Thank you for the information. Let me touch base with my team and see how high-priority such custom development is. I'll circle back as appropriate. Appreciate the help.