Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
Hi there,
Does anyone know or can help with the following:
How can I A) make both the logo section and main menu bar transparent on the collection and product pages (I already have it transparent on main page)
B) or have the option to delete the logo section leaving just the main menu bar (again ONLY on Collection and Product Pages)
Thank you
Not clear to me . please share proper screenshot what do you want
Below is product page (same applies for collection page).
I don't want all the white at the top - I would like to have all of it transparent (header and main menu bar) like my home page or delete the header logo section (but ONLY on product and collection pages) leaving just the main menu bar.
It would be good to see and/or have both options available
Add code Your assets/theme.scss.liquid bottom of the file.
@media only screen and (min-width: 750px){
.template-product .site-header__upper {display: none !important;}
.template-collection .site-header__upper {display: none !important;}
}
Thanks!
Thank you.
I now have this:
Is there any way of replicating this on the mobile collection and product pages?
Can I make what is left there transparent?
You have been the greatest help - thank you
Please remove previous provided css code .
I have removed - am I supposed to replace it with anything?
Try this css code
Add code Your assets/theme.scss.liquid bottom of the file.
@media only screen and (min-width: 750px){
.template-collection .site-header {
width: 100%;
position: absolute;
background-color: transparent;
}
.template-product .site-header {
width: 100%;
position: absolute;
background-color: transparent;
}
}
Brilliant - the top header section is now transparent but I have kept the whit main menu bar - excellent thank you yet again.
All I am missing now is the ability to make the header section transparent on mobile product and collection pages - on mobile I still have the white bar (but dont want to lose the menu and cart).
I made the home page transparent so have menu - logo - cart (but transparent) - just don't know how to do it for collections and products pages.
also add following css class
@media only screen and (min-width: 750px){
.template-collection #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
.template-product #shopify-section-header {
position: relative;
width: 100%;
z-index: 9;
}
}
User | RANK |
---|---|
127 | |
95 | |
78 | |
54 | |
46 |
Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022Shipping can be one of the most vital parts to set up and manage your business. Understand...
By Ollie Dec 16, 2022