Hello, im using the Refresh theme and i want my header to be transparent, please help! This is my store: shilaboost.no
You will just want lower opacity.
Full transparency is not recommended as there will be a domino effect of other things you need to fix as then things like icon and text will no longer have a background that gives them a strong contrast severely reducing the usability of the site.
This can be a common topic for Dawn based themes so just search “dawn transparent header” “dawn transparent menu” etc.
1 Like
Hello @Shilaboost 
In Shopify Admin, you can go to Edit code, open file base.css and add this code snippet at the bottom
header.header {
background: rgba(255, 0, 0, 0.2);
}
Feel free to play around with the color value and transparency. Hope that helps!
1 Like
Hi @Shilaboost ,
This is PageFly - Free Landing Page Builder.
You can add this code at the very bottom of your CSS file
.header-wrapper {
position: fixed;
top: 0;
width: 100%;
}
.header__menu-item, .header__active-menu-item, .header__icon .icon {
color:#fff
}
.header__menu-item:hover{
color:#fff;
}
This code above will give you a transparent header, but to make an effect, you might need to have a full-screen image banner on top.
Hope this can help you solve the issue.
Best regards,
PageFly
How do i lower the opacity on the header then? Thanks for reply
Hello @Shilaboost
You can change the last value to adjust opacity. For example
header.header {
background: rgba(255, 0, 0, 0.2);
}
The opacity value is 0.2 (meaning opacity is 20%), so to reduce to 10% opacity set it to 0.1
Although it is not recommended, if you want it to be completely transparent then the code should be
header.header {
background: transparent;
}
Hi @Shilaboost ,
Please use this code to lower your opacity, but your theme has a default background, if your lower the opacity, that background color will be show like this
Anyway code for your opacity decrease :
header.header {
background: transparent;
}
Hope this can help you solve the issue.
Best regards,
PageFly