Hi!
I’m new to shopify and trying to build my first e-commerce website.
I have no experience with coding at all.
I just want to make my header transparent so that I can get my logo on top of the background image of my homepage. I’m using the Dawn theme!
Please send help
Thankyou
Perzia
Hi @Perziamalayeri !
This is PageFly - Advanced Page Builder. I would love to give you some recommendation
---->In your theme.liquid file in your layouts folder
---->Add this style code and condition right after the closing tag:
{% if template.name == ‘index’ %}
.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;
}
{% endif %}
Best Regards;
PageFly
Thanks for your reply and help!
I’ve tried it but it’s not yet what I want. See images of what happened to the header. I’ve also added an example of what I’m aiming for (an example from Triangle.com ).
Thanks a lot!
Perzia
Hi @Perziamalayeri ,
You can check it here:
Please go on your Online Stores> Customize Themes:
On advanced settings ,
In the Header settings, click on Enable transparent header.
Then click save it.
I hope this helps.
@Perziamalayeri
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.
Thankyou, but sadly there is no option for this in the “Dawn” theme.
Hello, I accidentally pressed “accept as solution” But it’s not solved yet. Please help me!
Hello @Perziamalayeri ,
First of all many Congratulations on choosing Shopify as your preferred eCommerce platform.
Shopify offers the best community to its retailers and merchants to get their problems resolved quickly and easily.
Where there is Shopify there will be Experts like us, to help you with any problem, therefore making your Shopify journey hassle-free and smooth.
You can fix this issue with the help of a custom code, you need to follow these steps:
Go to your Shopify admin > Sale channels > Online store
Themes > Select your dawn theme > Click on Actions > Edit code
In your Sections folder open the header.liquid file.
Paste the below-provided code before on the very first line of code in this file and save the changes.
.header-wrapper{
background: none;
border: none;
}
Check the result on the desktop:
image.png
Check the result on a smartphone:
image.png
The above solution will help you fix it for sure.
Note: You are only advised to perform this if you are experienced with liquid code, else please hire a Shopify expert who can help you with this issue or connect with us for the same.
All the best,
CedCommerce
Hi! Thank you so much. It worked. I notice it is transparent when I scroll down.
Although, is it now possible to get the background image at the top instead of the white header bar? So that I see my image underneath the transparent header! (See example images before and after scroll).
Sohir
December 11, 2022, 5:57am
12
Hi, I also reached the same outcome as you but struggling to get the image to be underneath the header rather than the white bar. I am also using Dawn theme
I am also having the same issue after trying the code.
@Echonova
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.
Hi! Is there the above requested code to get the background image at the top instead of the white header bar? I saw that it was requested, but was unable to see any code responses.
Thanks!
Dabylo
April 21, 2023, 8:01pm
16
Hello. Please help me. How did you achieve the desired result? On the PC version, I managed to do it. But there is no phone ((( Please help me
Dabylo
April 21, 2023, 8:03pm
17
Hello. Please help me. How did you achieve the desired result? On the PC version, I managed to do it. But there is no phone ((( Please help me
I got it
.header-wrapper { position: fixed; top: 0; left: 0; width: 100%; background: transparent; border: none; z-index: 999; }
Hello, I am dealing with the same issue, with the code above can you specify where to place it? Thanks!