Shopify themes, liquid, logos, and UX
Hi,
Ím looking to use the theme Dawn and would like to have a transparent header.
Anyone that can tell me what todo? 🙂
//JOhan
hii, @JEnander
Kindly share your store URL so,
I can solve your problem.
Thank You.
Hi @Zworthkey
Store is till password protected, will I need to unlock open it first?
Thanks!
/ Johan
I'd like to know this too! Would like my main image to extend behind the header - is that possible?
Has anyone figured this out? I have the same question
Not yet. Let me know if you do! 🙂
hello @wearemkls , @JEnander , @newbieka
Please provide the website URL and if your store is password protected then also provide a password So I will check and provide a solution here.
@Kinjaldavra does it work if I share a preview? https://sna59sp6xm40d57c-54010118319.shopifypreview.com
please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 1024px) {
.header-wrapper {
position: relative;
}
.gradient {
background: transparent;
}
.banner__media.media {
position: absolute;
top: -90px;
}
.banner::after {
top: -90px;
}
.header__menu-item {
color: #ffffff;
}
.header__icon svg{
fill: #ffffff
}
}
Hey! It works, but there's still a blank space above.
Preview: https://t8vpapp6wiixgmpn-4802412642.shopifypreview.com
hello @magmar
Remove space use below code please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 1024px){
.banner__media.media {
position: absolute;
top: -126px !important;
}
}
Hi @Kinjaldavra Thank you for looking into this! This worked on desktop view but not mobile. And on Desktop, I believe, it might have changed the announcement bar. I can no longer choose I color for it on desktop but I can on mobile. And do want an announcement bar.
Thanks again!
hello @newbieka
for both mobile and desktop Transparent header please remove my old code and insert below code
.header-wrapper.color-background-1.gradient{
position: relative;
background: transparent;
}
#shopify-section-template--14167264985197__image_banner .banner__media.media{
position: absolute;
top: -140px;
}
#shopify-section-template--14167264985197__rich_text .rich-text.color-background-1 {
margin-top: -80px;
}
@media screen and (min-width: 750px){
#shopify-section-template--14167264985197__image_banner .banner__box {
position: absolute;
bottom: 120px;
}
Hi!
Thanks! It works fine for me. I will test and see if it works with the other design elements
//Johan
Thanks for the solution @Kinjaldavra . This seems to leave a big padding at the bottom of my banner. Any idea on how to fix this? https://habibco.com
Hi
@HJF If you want just have a transparent header and still able to use the sticky header. Try this code. The code is best if you want the image in the home page to be the background or whatever section you want to be the background. This only applies in the home page. It will be weird to have a transparent header in other pages.
hello @HJF
can you please share a screenshot of which banner leave big padding at the bottom
this code works perfectly - however, I would like a solid color announcement bar. How can this be modified to not make the announcement bar transparent?
Your code works fine for the transparent header but it applies on all pages I need a transparent header only on the home page and a default header for the rest of the pages. Thanks
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024