Make Rich Text Background Transparent

[plants4friendz]

Hello,

My rich text banner is blocking my mega menu on this page. Anyone have any suggestions for how to make the background truly transparent?

www.thespiralpath.love/products/flower-reading

Thank you!

[Aashish_Bhatt · Accepted solution]

Hi @plants4friendz ,

Thanks for asking a great question here on the Shopify Community!

I'm a Shopify expert, and I'm happy to help you with the issue you're facing. After reviewing the website URL you shared, I found that there’s a CSS issue causing the problem. To resolve this, you’ll need to make a small adjustment in your theme’s code. Please follow these steps:

Note: A basic understanding of code is required for this fix.

Steps to resolve the issue:

1. Log in to your Shopify admin dashboard.
2. Navigate to Online Store and click on Themes.
3. On the right-hand side, click on the three dots (•••) next to your live theme.
4. Select Edit Code from the dropdown.
5. In the left-hand sidebar, locate and open the base.css file under the Assets folder.
6. Scroll down or search for line 166, where you’ll see the following code:

.isolate {
  position: relative;
  z-index: 0;
}

7. Replace that code with the following:

.isolate {
  position: relative;
  z-index: -1;
}

8. Once you've made the change, click Save in the top-right corner.

Now, refresh your website and test the page—it should work fine!

if you have any more questions or need further assistance free to ask.

[plants4friendz]

Thanks so much Aashish! Is there something similar that could fix this issue?

 

[Aashish_Bhatt]

Try to add below code just underneath the above code  on same file base.css

.header-template--18535041106165__ss_header_1_w7bFHW {
    z-index: 9;
    position: relative;
}

[plants4friendz]

Hmm, no luck!