How can I fix the header overlay issue on my interior design website?

Shopify Discussion
1

Hello shopify community

I have two problems to share with you my first problem is that my site name (https://www.classy-interior.com/) which hides and makes illegible the writing because of the overlay

If no solution is possible or if you have some much desired coding skills can you make this header aesthetically pleasing I don’t necessarily have an idea but all I know is that if you offer me a solution I will be infinitely grateful as I don’t have the power to afford the services of an expert.

Yours sincerely, Mohamed

Screenshot_2023-12-08-11-40-48-367.jpeg
Screenshot_2023-12-08-11-40-48-367.jpeg1199×1742 143 KB

2

Hi, @chaouchemohamed .

Go to Online Store
2) Edit Code
3) Find theme.liquid file

  1. Add the following code in the bottom of the file above tag.
h1.collection-hero__title {padding-top: 130px;}

.scroll-trigger.animate--fade-in, .scroll-trigger.animate--slide-in {
    opacity: 1;
}

Result:

websensepro_0-1702123243648.png
websensepro_0-1702123243648.png311×519 35.2 KB

3

Hi @chaouchemohamed

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

div#shopify-section-template–20281605685593__main-collection-banner {

margin-top: 150px !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly