Make Rich Text Background Transparent

Store Design
,

Topic summary

A user is experiencing an issue where a rich text banner blocks their mega menu, preventing proper navigation. The banner’s background needs to be transparent to allow the menu to display correctly.

Proposed Solution:
A Shopify expert suggests modifying the theme’s CSS code in the base.css file:

  • Locate line 166 containing .isolate styling
  • Change z-index: 0 to z-index: -1
  • This adjustment should reposition the banner layer below the menu

Follow-up Issue:
After implementing the initial fix, the user reports a similar problem persists elsewhere. The expert provides additional CSS code targeting the header element with specific z-index and position properties.

Current Status:
The discussion remains unresolved—the user reports the second CSS solution did not work (“no luck”). The issue requires further troubleshooting to achieve the desired transparent background effect that allows the mega menu to display properly over the rich text banner.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

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?

Screenshot 2024-10-06 at 9.01.55 AM.png
Screenshot 2024-10-06 at 9.01.55 AM.png2786×1436 427 KB

www.thespiralpath.love/products/flower-reading

Thank you!

2

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.

  1. Navigate to Online Store and click on Themes.
  2. On the right-hand side, click on the three dots (•••) next to your live theme.
  3. Select Edit Code from the dropdown.
  4. In the left-hand sidebar, locate and open the base.css file under the Assets folder.
  5. Scroll down or search for line 166, where you’ll see the following code:
.isolate {
  position: relative;
  z-index: 0;
}
  1. Replace that code with the following:
.isolate {
  position: relative;
  z-index: -1;
}
  1. 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.

3

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

Screenshot 2024-10-06 at 9.57.49 AM.png
Screenshot 2024-10-06 at 9.57.49 AM.png2806×1474 338 KB

4

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;
}
5

Hmm, no luck!