How to make a transparent header on Horizon theme?

Store Design
1

Hi all! Trying to make header transparent across all pages. Please help. I’m not a coder. Don’t know what I’m pressing. Right now, header can only be transparent on home page and product page, but that’s it. Thank you in advance.

2

Hi @posturerocket :waving_hand: SEARCH first it one of the rules and pretty easy:
e.g. https://community.shopify.com/search?q=horizon+transparent+header

Some times such things are possible just using CSS settings so try that before file modifications in any prospective answers https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

Always consider that the original theme developers made things certain ways on PURPOSE because they knew what they were doing.
So be wary of wearing the designers hat undoing guardrails when you could be doing more important things for the business.

Or if you can’t DIY, you can reach out to me for customization services.
CLICK my profile-pic or visit my profile on the forums
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc

3

Hi,

All recommendations you made I did prior to posting the question. I haven’t found a viable solution since new Shopify came out. Tried multiple CSS code formulations and nothing is working. Can you give me a hand?

4

No “new” shopify has come out it’s all incremental changes for different features of the same platform.

Then provide example code and preview urls, and post links.
Either way adding needless difficulty by not providing exacts URLs to the pages needing new designs for other people to look at.
Which is something to notice others had to do to get anywhere in there posts.
Other people aren’t mind readers communicate detail in advance.

Good Luck.

5

Making a header transparent is very easy. Just add the code like this to the “Header” section “Custom CSS” setting:

header-component {
  --header-bg-color: rgba(0 0 0 /0);
}

However, this is just the beginning – there will be a lot of followup questions, like “While it does not overlap my hero banner?” and then “Oh, why does it overlap my product title?”, “Why default black color of the menu is not visible over my black hero banner?”, “What background I want for my menu and cart drawers?”

These all should be answered, and taken care of.

O.W. Grant: Some people just don’t know what to wish for.

6

@posturerocket can you please share your website link?

7

Hi @posturerocket ,
If your theme only allows a transparent header on the homepage and product pages, that’s because most Shopify themes conditionally apply the “transparent header” class only on selected templates. To make your header transparent across all pages, you’ll need to add a small code change.

How to make the header transparent on every page

  1. Go to Online Store → Themes → Edit Code
  2. Open header.liquid (or in some themes: sections/header.liquid)
  3. Look for a condition similar to:
{% if template.name == 'index' or template.name == 'product' %}
  <header class="site-header transparent-header">
{% else %}
  <header class="site-header">
{% endif %}
  1. Remove the condition and use the transparent class on all pages:
<header class="site-header transparent-header">
  1. If your theme uses CSS based on page types, also add this to base.css (or theme.css):
.transparent-header {
  background: transparent !important;
}