How can I make a heading overlap product images in a feature section?

Solved
pearlerwork
Excursionist
20 0 5

I'd love to achieve this sort of look:

Screen Shot 2021-06-23 at 2.02.45 pm.png

 

Here's my code so far:

 

div#shopify-section-1559585995085 .section-header__title {
 	text-align: left!important;
    margin-bottom: -80px!important; 
}

 

 

How it looks:

Screen Shot 2021-06-23 at 2.04.44 pm.png

The website is: https://mooncat-ui.myshopify.com/ and the password is "pearler"

Thanks heaps!

Pallavi
Shopify Expert
2382 397 515

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

div#shopify-section-1559585995085 .section-header__title {
margin: 0 !important;
}

div#shopify-section-1559585995085 header.section-header {
margin-bottom: 0;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Natztech
Shopify Partner
2127 545 1298

hello @pearlerwork 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

div#shopify-section-1559585995085 .section-header__title {
    margin-bottom: -40px !important;
}

 

0 Likes
HardikDavra
Shopify Partner
2465 386 1038

This is an accepted solution.

@pearlerwork 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

.section-header__title  {
    z-index: 10;
    position: absolute;
}

 

HardikDavra
Shopify Partner
2465 386 1038

@pearlerwork  Thank you for accepting my answer as a solution.