District Theme - Make Header Transparent

Solved
Highlighted
Excursionist
17 0 4

Hey, I'm looking to make the header in district theme transparent in mobile view, so the logo appears to be hovering at top of slideshow. Any help?

0 Likes
Highlighted

Success.

Shopify Expert
665 170 201

Hi, @hsh100 ,

This is Evita from On The Map.

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

 

@media screen and (max-width: 700px) {
#shopify-section-header {
position: absolute;
z-index: 100000;
width: 100%;
}
header.site-header {
background-color: transparent!important;
} }

 

 

Best, Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Highlighted
Excursionist
17 0 4

Thank you Evita! :)

0 Likes
Highlighted
Excursionist
17 0 4
Hey Evita,

When I made the header transparent, the logo is appearing on the product images on product pages. How would I make the logo appear a small bit higher on every page (apart from homepage) so it doesn't cover images and titles?
0 Likes
Highlighted

Hello @hsh100,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Excursionist
17 0 4

Hey,

Url is ....

I found another solution for this by pasting this code at the end of theme.scss.liquid, but then it leaves a white line gap between the top bar and slideshow. Do you know how I could get rid of the white line? Thank you.

.template-index #shopify-section-header{
margin-bottom: -52px;
position: relative;
z-index: 9;
}
.template-index #shopify-section-header header{
background-color: transparent;
}

0 Likes
Highlighted

Success.

@hsh100,

Remove this css

.template-index #shopify-section-header{
margin-bottom: -52px;
position: relative;
z-index: 9;
}

And add below css

.template-index #shopify-section-header {
	position: absolute;
	z-index: 9;
	width: 100%;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Excursionist
17 0 4

That's great, thank you! :)

0 Likes