Make header transparent in Craft theme

Make header transparent in Craft theme

2 0 1

How do I make my header transparent?

Replies 6 (6)

52 9 13

Hi @helloforeve , thank you for posting here!

You can follow my instruction below:

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: Click on theme.liquid and paste the code above the </head>

nav#navbar-mobile {
background-color: transparent !important;
    position: fixed;
    left: 0;
    right: 0;

If my answer is workking for your store, please let me know by Accepting Solution and Giving Like !!!

Check here Wizzcommerce App to optimize your store: SnapNoti FOMO Visitor Counter | SnapBundle Volume Discounts | Wizz Flash Sale & Price Edit | BOGO+ | Buy X Get Y Free Gift
Find more support, feel free to contact:
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!

Shopify Partner
4365 1123 1380

Hey @helloforeve 


Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

@media screen and (min-width: 768px) {
.header-wrapper.color-scheme-1.gradient {
    background: transparent !important;
main#MainContent {
    margin-top: -150px !important;




If I managed to help you then, don't forget to Like it and Mark it as Solution!


Best Regards,

Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
2 0 1

Hi! Thank you, but now my other pages don't look right - the content all shifts up as well. Can you advise?

Will like the header to be the default theme on hover as well.

Shopify Partner
1111 379 448

Hi @helloforeve

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag



header.header.header--top-center {
    background-color: transparent !important;
    position: fixed !important;
    max-width: 100%;
    width: 100vw;

Here is result: 


Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍


If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via

BSS Commerce - Full-service eCommerce Agency

Shopify Partner
1184 335 283

hi @helloforeve 

This is Henry from PageFly - Landing Page Builder App


You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code. 

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save


.header-wrapper.color-scheme-1.gradient {

    position: absolute;

    width: 100%;

    background: transparent !important;



Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

Shopify Partner
8532 1682 1692

Hi @helloforeve 

Please go to your Online Store > Themes > in Craft theme, click "..." > Edit code, open theme.liquid file, after <head> paste this code below and save file.

{% if template == 'index' %}
.header-wrapper { background: transparent !important; }
#MainContent { margin-top: -137px; }
@media (max-width: 749px) {
#MainContent { margin-top: -64px !important; }
{% endif %}

Screenshot 2024-06-28 at 11.22.02.png


- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.