Shopify themes, liquid, logos, and UX
Hello everyone,
I'm currently working on my first ever Shopify store and I was wondering how I could add these design elements as I don't see the option to do so:
- Transparent heading
- Heading text and button moved lower similar to this: https://imgur.com/xpzPTXT
Any help would be greatly appreciated!
URL: https://glowee-cosmetics.myshopify.com/
Password: heading
Thank you!
Solved! Go to the solution
This is an accepted solution.
Hii, @Dike
Paste this code on top of the section-image-banner.css file.
@media only screen and (min-width: 992px) {
.banner__content.banner__content--flex-end.page-width {
position: relative !important;
top: 75px !important;
}
}
.banner__box.color-background-1 {
background: none !important;
}
Thank You.
Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/base.css-->paste below code at the bottom of the file.
.header-wrapper {
display: block;
position: absolute !important;
background-color: transparent !important;
width: 100%;
}
Thanks!
@dmwwebartisan I used the code it turned my my header transparent on all my pages. How to I code it only for my homepage plus I want my header and to be still (sticky)....the goal for me is to have more of a boundless theme header.
Please share your store URL & a screenshot what do you want!
Thanks!
Ok so my I currently have my password page up but the I want my homepage to be the only header to be transparent(such as the picture marked in green) I want the rest of my page headers to be normal white. The picture marked in red is my current homepage & the picture marked in green is my desired homepage design.
Hi @jg6
I made this short and simple code to do the job. Works with sticky header too. Check the video for more info
This is an accepted solution.
Hii, @Dike
Paste this code on top of the section-image-banner.css file.
@media only screen and (min-width: 992px) {
.banner__content.banner__content--flex-end.page-width {
position: relative !important;
top: 75px !important;
}
}
.banner__box.color-background-1 {
background: none !important;
}
Thank You.
Thank you both so much!
Zworthkey's code is absolutely perfect. dmwwebartisan's was great too, but I worded the title wrong but the transparent header code will definitely be used for future designs.
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