Slideshow and Header issues

PrimeBeast7
Excursionist
21 0 6

So my site has a slideshow and a hero header which appears as an overlay on the slideshow. 

The code looks like this:

.hero__content-centered {
display: table-cell;
vertical-align: bottom;
padding: 0 $gutter-site $height-action-bar;
transition-property: all;
transition-delay: 0.2s;
transition-timing-function: ease;
opacity: 0;

I want the overlay text to be on top of the slideshow, so when I change vertical-align: bottom; to vertical-align: top; the text overlay appears behind my website header.

What can I change or add to make sure the text overlay never goes past my website header?

Thanks!!

 

dmwwebartisan
Shopify Partner
5806 1330 1703

@PrimeBeast7 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Natztech
Shopify Partner
625 167 417

Please provide website url and if your store is password protected then also provide password

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
LitExtension
Shopify Partner
675 67 119

Hi @PrimeBeast7

You can try with this snippet:

.hero__content-centered {

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

}

Hope this helps.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
PrimeBeast7
Excursionist
21 0 6

It moves it up but unfortunately still goes behind the header, thank you though 

0 Likes