@KetanKumar
Hi, we are using the ‘craft theme’ for our Shopify store and we are wondering if anyone can help us in making our header transparent. When we go to header settings there is no option for a transparent header like there is for other themes.
We only want our header to be transparent when users are at the top of the home page and then when they scroll down we want the header to become Opaque with a different font colour to the transparent header.
any help would be greatly appreciated!!
thanx, mucci:ldn
1 Like
@Muccildn
Sorry, you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
1 Like
we are currently updating our site and making a change to our theme choice. the site in question is not yet published. do we need to publish it for you to be able to view it ?
@Muccildn
No, Send me the preview url
1 Like
Hi @Muccildn ,
Go to Assets > base.css and paste this at the bottom of the file:
.header-wrapper{
background: transparent !important;
position: absolute;
width: 100%;
}
.header__active-menu-item,
.header__icon,
.header__menu-item {
color: #fff !important;
}
Hope it helps!
exactly what we wanted, the problem is we cant see any text in the drop down menus now !
we also now cant see the text on white background pages. we want the header to be 100% transparent at the top of the page white text. then when you scroll down the page we want there to be a slight opacity to the header and the text colour to change to the green colour we have in other places. is this at-all possible? sorry to be a pain
@Zworthkey
1 Like
Hi @Muccildn ,
Can you activate the sticky header? After you activate it, I will help you check and add the code
@LitExtension the sticky header is activated
Hi @Muccildn ,
Go to Assets > base.css and paste this at the bottom of the file:
.shopify-section-header-sticky .header-wrapper{
background: var(--gradient-background) !important;
}
.shopify-section-header-sticky .header__active-menu-item,
.shopify-section-header-sticky .header__icon,
.shopify-section-header-sticky .header__menu-item {
color: rgba(var(--color-foreground),.75) !important;
}
Hope it helps!
Hi!
I currently use transparent checkout in my store, and at the time of product checkout, the transparent and native of Shopify remains, I’ve tried everything, and I can’t remove this second checkout..
The button on the left would be the native one from Shopify.. the button that I need to disable, and the one on the right, the transparent checkout button
the option to remove the checkout button, works on products, but not on checkout..
Would you help me? I don’t know what to do anymore
Theme Craft
1 Like
@CriativeA
Welcome to the Shopify community!
Thanks for your good question.
Please share your store URL.
So that I will check and let you know the exact solution here.
1 Like