Shopify themes, liquid, logos, and UX
Hi there,
We're working on updating our store to a new theme and have selected the Debut template to work from. Currently we use Brooklyn for our live site and if the top section of the homepage is a slideshow we're able to make the header transparent so that our logo and nav. menu are overlaid on the slideshow, however I can't seem to figure out how to do it in the Debut theme. Is this possible? Is it something I can do in the online editor or would it require special code?
Thank you!
Solved! Go to the solution
This is an accepted solution.
Thanks for update
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.template-index .site-header {background-color: transparent; position: absolute;}
.template-index .site-header__mobile-nav {background-color: transparent;}
Please provide website url and if your store is password protected then also provide password
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Thanks for url but i need debut theme your store url
Sorry about that, I forgot it's still in editing mode. Here's the template preview url: https://luxe-derma-partners.myshopify.com/?fts=0&preview_theme_id=81029038124
Thanks!
This is an accepted solution.
Thanks for update
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.template-index .site-header {background-color: transparent; position: absolute;}
.template-index .site-header__mobile-nav {background-color: transparent;}
How can I make it so that when I scroll down it stays at the top and it has a white background?
Like in this website:
Sorry for facing this issue, it's my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question. 😊
Please share your site URL,
So I will check and provide a solution here.
thanks for details
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.template-index #shopify-section-header {
position: absolute;
width: 100%;
}
.template-index #shopify-section-header .site-header {
background: transparent;
}
.template-index #shopify-section-header .site-header .site-header__mobile-nav {
background: transparent;
}
Hi there Ketan
Thank you for your solution on making the header transparent. It works so well.
Unfortunately, when I click on the hamburger menu in mobile,
the menu hides behind everything and disappears
site link is https://greendesignsa.myshopify.com/ and password is troyur
your help would really be appreciated 🙂
thank you in advance!
sorry for the late reply I have check its working fine now
it doens't work the other pages are now hiding under the transparent header!!!
i think you let us make faults so we will ask your help. Not good
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.
thanks for url
try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
.site-header, .site-header__mobile-nav {
background-color: transparent;
border: none;
}
https://codepen.io/JGallardo/pen/lJoyk
please look what it did to my website, are you even serious bro
i need it like rolex.com
not like this
do you want to help me or not
yes, as per your exampee link
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
Hi Ketan, I have used your code you provided here and it has worked nicely. The only thing is it has left a white line under the header. Can you help please?
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.
great thanks for detail please add this code
#shopify-section-header {width: 100%;}
.site-header {border: none !important;}
Thank you for the Ketan, It didn't work unfortunately 😞
It made no changes on desktop, It made some changes on mobile only but there was still a white background behind the header with a line underneath.
do you have like this?
Hi Ketan, It doesn't look like that here on my end. Just to confirm are these the code I use.
I am pasting it in Asset->/theme.css because I don't have theme.scss.liquid.
This is the code I am using.
.template-index .site-header {background-color: transparent; position: absolute;}
.template-index .site-header__mobile-nav {background-color: transparent;}
#shopify-section-header {width: 100%;}
.site-header {border: none !important;}
can you please add this script
https://codepen.io/codeandfly/pen/xbQVOR
Hey, Thanks for that. Quite unsure where they are going, can you give me directions where exactly I'm adding the script, please.
yes i have sent message please check
Hi there. I'm wondering if you can help with my problem too?
I can't seem to make my logo appear transparent in the header in Debut theme...
I followed suggestions offered in other questions but it hasn't helped. I don't have theme.scss.liquid so I was pasting code into theme.css. That didn't work so I created theme.scss.liquid. That also didn't work.
Any suggestions would be helpful!
https://sonosnaps.myshopify.com/
Pass: crewdo
do you mean like this?
Hi
I would like to make the header a little bit more transparent when I scroll down... it still should be white but transparency should be like 50%. Could someone help me?
Hello. I made the header transparent with that code and also made it sticky with these steps but the logo, shopping cart icon, and search icon have disappeared in desktop view. On mobile, it isn't working at all. It doesn't show any content in the header on mobile.
Thanks please flow this step
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.js.liquid->paste below code at the bottom of the file.
$(window).scroll(function() { if ($(this).scrollTop() > 35){ $('.site-header').addClass("sticky"); } else{ $('.site-header').removeClass("sticky"); } });
Step = 2
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.site-header.sticky { position: fixed; width: 100%; z-index: 1; top: 0; }
Hi, thanks for the help, the code worked in the sense that it made the header transparent, however I have my logo centered and it has pushed it underneath the menu. Is there a simple way to change it back?
Thanks in advance
Hello
It only makes homepage header transparent not other pages header transparent
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.
thanks for the details, yes please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.template-index .site-header {
position: absolute;
width: 100%;
top: 0;
background: transparent;
}
.template-index .site-header .site-header__mobile-nav {
background: transparent;
}
.template-index .site-header .site-header__mobile-nav .site-nav a {
color: #fff;
}
.template-index .site-header .site-header__mobile-nav .site-nav__link--active .site-nav__label {
border-bottom-color: #fff;
}
.template-index .site-header .site-header__mobile-nav .icon {
color: #fff;
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024