How to make menu backgrounds opaque with color instead of transparent on Fetch theme?

Store Design

Topic summary

A Shopify store owner using the Fetch theme needed help making header and footer menus opaque with a solid background color instead of transparent, particularly on mobile where the transparent overlay created a cluttered appearance when the menu was open.

Solution provided:

  • Add custom CSS code to the theme’s asset folder
  • Target files: base.css, theme.css, base.min.css, or theme.min.css
  • Paste the following CSS at the bottom:
#SiteHeader.site-header {
  background-color: #ffffff0;
}
.site-header__drawer.is-active {
  background-color: #fff;
  z-index: 99;
}

Access method:
Three dots menu → Edit code → Assets folder → Open relevant CSS file

Resolution:
The store owner successfully implemented the fix by adding the CSS to theme.css.liquid, which resolved the transparency issue perfectly. Step-by-step screenshots were provided to guide through the code editor navigation.

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

Please advise how to change so the header and footer menu are not hovering over the page with a transparent background, especially on the mobile site. I am trying to get these menus to be opaque with a theme color.

Other articles advise of ways to do it but the theme code and assets are different for this Fetch theme. shop url: https://begood.coffee

Thanks in advance!

2

Hi @begoodcoffeeco

The coffee products are looking great and the website is very cool.

You can place below css in edit code > asset folder > base.css

and paste below css at bottom

#SiteHeader.site-header {
	background-color: #ffffffe0;
}

It’ll look like below

Sheesh_b_0-1689964013958.png
Sheesh_b_0-1689964013958.png1298Ă—748 179 KB

Thanks

Sheesh B

3

Hi Sheesh,

Thank you very much for your kind words and reply. Unfortunately with this theme, “Fetch” I do not see any asset folder called base.css so I am not sure where to paste the code.

Any help is greatly appreciated.

4

To clarify, I am trying to make it so that when you tap the menu, it does not hover over the page with a transparent background, especially on mobile. I need the menu to have a solid color background so it does not look cluttered when it is open.

5

Hi There,

I can guide you how to add the css to base.css file

Click on three dots

Sheesh_b_0-1689964945877.png
Sheesh_b_0-1689964945877.png1733Ă—660 43.8 KB

Then click on edit code

Sheesh_b_1-1689964996783.png
Sheesh_b_1-1689964996783.png543Ă—489 12.2 KB

Then look for assets folder

Sheesh_b_2-1689965044082.png
Sheesh_b_2-1689965044082.png375Ă—481 10.5 KB

Then under assets either theme.css or theme.min.css or base.css or base.min.css

Open any file that you can find and paste the below code at the bottom

#SiteHeader.site-header {
	background-color: #ffffffe0;
}
.site-header__drawer.is-active {
	background-color: #fff;
	z-index: 99;
}

This will solve your issue and it’ll look like below

Sheesh_b_3-1689965278720.png
Sheesh_b_3-1689965278720.png583Ă—817 51.6 KB

Thanks

Sheesh B

1 Like
6

Thank you so much! I ended up pasting this recommendation in theme.css.liquid in the assets and it worked perfectly. I really appreciate your help, Sheesh!

1 Like