Make header transparent in Craft theme

Make header transparent in Craft theme

helloforeve
Visitor
2 0 1

How do I make my header transparent? https://4k3l273x1hl7ijog-66317877397.shopifypreview.com

Replies 6 (6)

WizzCommerce_Co
Excursionist
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>

<style>
nav#navbar-mobile {
background-color: transparent !important;
    position: fixed;
    left: 0;
    right: 0;
}
</style>

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: support@wizzcommerce.io
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!

Moeed
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

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

RESULT:

Moeed_0-1719504685131.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
helloforeve
Visitor
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? https://4k3l273x1hl7ijog-66317877397.shopifypreview.com

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

BSSCommerce-HDL
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

BSSCommerceHDL_1-1719504550641.png

 

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

Here is result: 

BSSCommerceHDL_2-1719504577438.png

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 community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

PageFly-Henry
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.

Dan-From-Ryviu
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' %}
<style>
.header-wrapper { background: transparent !important; }
#MainContent { margin-top: -137px; }
@media (max-width: 749px) {
#MainContent { margin-top: -64px !important; }
}
</style>
{% 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.