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

Store Design
, ,
1

I’d love to achieve this sort of look:

Screen Shot 2021-06-23 at 2.02.45 pm.png
Screen Shot 2021-06-23 at 2.02.45 pm.png1666×770 6.97 KB

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
Screen Shot 2021-06-23 at 2.04.44 pm.png2876×990 146 KB

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

Thanks heaps!

1 Like
2

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;
}
3

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;
}
4

@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;
}
1 Like
5

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

1 Like