How can I make the header of my Origin theme website transparent?

Store Design
1

Hi there,

Would love some help in getting the header of our website to be transparent, so it sits on top of the image. Is this possible? I’m using Origin theme.

website

password: skoffi

And is it possible to make the hamburger icon in white? I can’t see any settings for this in the editor :slightly_smiling_face:

Screenshot 2023-07-21 at 14.37.56.png
Screenshot 2023-07-21 at 14.37.56.png2876×784 142 KB

thanks so much!

2

Hi @INFRA ,

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.header-wrapper.color-background-2.gradient {
    background: transparent;
}
svg.icon.icon-hamburger {
    color: white;
}

Result:

Ribe_Dagandara_0-1689944681868.png
Ribe_Dagandara_0-1689944681868.png1360×332 16.3 KB

The hamburger menu is not so attractive on that color. :sweat_smile:

I hope it help.

3

Hi there,

Thanks! My initial edits on the homepage disappear, hence there was no image :slightly_smiling_face:

The hamburger is white, but the header is not transparent yet, is there any other code that can be used?

Screenshot 2023-07-21 at 15.23.42.png
Screenshot 2023-07-21 at 15.23.42.png2062×658 147 KB

4

Would you mind to share the header with the image? Preview would be great also. Thanks!

5

Sorry what do you mean exactly? It’s live on the site :slightly_smiling_face:

6

I managed to get it with adding below code

background: transparent!important;
    position: absolute;
    width: 100%;
    max-width: 100%;
}

Is there a way to hide the logo on the first slide? @Made4uo-Ribe

7

i also have the origin theme and wants the header transparant, also under mobile. I tried the above code but no luck. Where and what is the exact code to add?

8

Here is the solution to make your header transparent: