How can I make the header transparent?

Store Design
, ,

Topic summary

A user seeks to make their Shopify store header transparent and change text/icon colors to white, including the menu. They’re using the Berlin theme.

Solution provided:

  • Add custom CSS code to make the header transparent with white text
  • Initial suggestion was to edit theme.css/base.css files
  • Since Berlin theme lacks these files, the workaround is to insert CSS within <style> tags in the <head> section of theme.liquid

CSS code targets:

  • Mobile and desktop header elements (header#header-mobile-menu, header#section-header)
  • Sets background to transparent and position to absolute
  • Changes header list and button colors to white

Current status:
The solution successfully implemented. User now asks a follow-up question about differentiating colors between main menu items and submenu items, which remains unanswered.

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

Hey there,> > How can I make the header transparent (right now background is white) and change the color of text and icons on header to white including menu?> > Here’s the link to the store:> > https://wt2wgk-ux.myshopify.com/

2
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
header#header-mobile-menu {
    background: transparent !important;
    position: absolute !important;
    width: 100% !important;
}

header#section-header {
    background: transparent;
    position: absolute;
    width: 100%;
}

.header__list>li>*, .header__buttons>li>* {
    color: rgb(251 251 244) !important;
}
1 Like
3

Thank you for your response.

I am using the Berlin theme and there’s no file with the name theme.css / based.css

4

Go to Shopify Admin > Online Store > Themes > Actions > Edit Code > open the theme.liquid file, then add your CSS inside the tag like this:
1 Like
5

Thank you so much. It works perfect.

What if I want to have different color for main menu item and submenu item? What changes do I need to have in above css code?